问表:按列对齐文本
EN

Stack Overflow用户

提问于 2021-06-25 12:05:02

回答 2查看 48关注 0票数 2

我希望按列对齐文本，而不是按td的属性针对每个单元格，因为我需要不同的列才能有不同的对齐方式。我在colgroup中尝试过text-align: center;，但它不起作用。

我找到了这个主题How to center the contents of an HTML table?，但他使用了td的属性，如果我有这么多td，这是没有意义的。例如，如果我有100个td，它将通过向每个td添加内联样式来膨胀超文本标记语言。

我想要完成的是使第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>

html

css

Stack Overflow用户

回答已采纳

发布于 2021-06-25 12:13:24

您可以使用:nth-child(n) CSS选择器。当然，如果您的cell有一个以上的colspan，这就会变得有点困难，但幸运的是，您没有。

#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>

票数 3

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68125297

复制

相似问题

问表:按列对齐文本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表:按列对齐文本EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问表:按列对齐文本
EN