表格：按列对齐文本答案

【问题标题】：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 感谢您指出，我已经编辑了我的问题。

标签： html css

【解决方案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
}

就是这样。

【讨论】：