表格：按列对齐文本
Posted
技术标签:
【中文标题】表格：按列对齐文本【英文标题】：Table: align text by column 【发布时间】：2021-09-08 12:17:03 【问题描述】：我想按列对齐文本，而不是按td 的属性定位每个单元格，因为我需要不同的列来进行不同的对齐。我在colgroup 中尝试过text-align: center;，但它不起作用。
我找到了How to center the contents of an html table?这个话题，但是他使用td的属性，我有这么多td也没有意义。例如，如果我得到 100 个td，它将通过为每个td 放置一个内联样式来使 HTML 膨胀。
我想要完成的是使第 2 列和第 3 列中的文本居中。
下面是示例代码：
#tb
width: 100%;
border-spacing: 0px;
#tb th,
#tb td
padding: 12px 0;
line-height: 0.9;
#tb th
border-bottom: 1px solid #000;
text-align: left;
#tb td
border-bottom: 1px solid #ddd;
#tb .tb-last-row
border-bottom: none;
<!DOCTYPE html>
<html>
<body>
<table id="tb">
<colgroup>
<col span="1" style="width: 70%;">
<col span="1" style="width: 10%; text-align: center;">
<col span="1" style="width: 20%; text-align: center;">
</colgroup>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td class="tb-last-row">Jill</td>
<td class="tb-last-row">Smith</td>
<td class="tb-last-row">50</td>
</tr>
</table>
</body>
</html>【问题讨论】：
请描述或包含您要完成的工作的草图。 @StanSmith 感谢您指出，我已经编辑了我的问题。 【参考方案1】：您可以使用:nth-child(n) CSS 选择器。当然，如果你有一个 colspan 超过 1 的单元格，这当然会变得有点困难，但幸运的是你没有。
#tb td:nth-child(1) // column 1
#tb td:nth-child(2) // column 2
#tb td:nth-child(3) // column 3
#tb
width: 100%;
border-spacing: 0px;
#tb th,
#tb td
padding: 12px 0;
line-height: 0.9;
#tb th
border-bottom: 1px solid #000;
text-align: left;
#tb td
border-bottom: 1px solid #ddd;
#tb .tb-last-row
border-bottom: none;
#tb td:nth-child(1)
text-align: center;
#tb td:nth-child(2)
text-align: center;
#tb td:nth-child(3)
text-align: center;
<!DOCTYPE html>
<html>
<body>
<table id="tb">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td class="tb-last-row">Jill</td>
<td class="tb-last-row">Smith</td>
<td class="tb-last-row">50</td>
</tr>
</table>
</body>
</html>【讨论】：
【参考方案2】：你可以做的是把一个 id 或一个类放到 中，例如：
<tr id="tr-id">
<td></td>
</tr>
然后像这样在您的样式表中选择：
#tr-id td
text-align:center
就是这样。
【讨论】：
以上是关于表格：按列对齐文本的主要内容，如果未能解决你的问题，请参考以下文章