CSS | 列宽属性

介绍

在 HTML 表格中，我们可使用 CSS 的列宽属性 width 来设置表格中每一列的宽度。这对于使表格具有正确的对齐方式和保持视觉上的一致性非常重要。

语法

width 属性以像素（px），百分比（%），em 或 rem 为单位指定列宽度。

table {
  width: 100%; /* 表格宽度是其父元素的 100% */
}

td {
  width: 50%; /* 每一列的宽度是其父元素（即表格）宽度的 50% */
}

示例

以下是一个简单的 HTML 表格：

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>2</td>
      <td>李四</td>
      <td>25</td>
    </tr>
    <tr>
      <td>3</td>
      <td>王五</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

我们可以通过 CSS 的 width 属性来定义每一列的宽度，如下：

table {
  width: 100%;
  border-collapse: collapse; /* 移除默认的表格边框 */
}

td {
  width: 33.3%; /* 每一列的宽度是其父元素（即表格）宽度的 33.3% */
  border: 1px solid black; /* 添加边框 */
  text-align: center; /* 水平居中 */
}

这将使每个单元格都占用表格宽度的三分之一，并将表格单元格的内容水平居中。最终的表格如下所示：

|编号|姓名|年龄| |---|---|---| |1|张三|20| |2|李四|25| |3|王五|30|

注意事项

• 如果表格中的列宽之和超过了表格容器的宽度，那么表格将会水平滚动。因此，我们需要根据内容的大小和数量来适当地定义列宽。
• 如果给定了百分比宽度，则它们相对于当前单元格父容器的宽度进行计算，并继承到所在行中的任何单元格。因此，我们需要设置表格的宽度为 100%，以确保它占整个可用空间。
• 列宽属性是仅适用于 table、col、colgroup、tbody、td、tfoot、th 和 thead 标签的 CSS 属性。

结论

在进行 HTML 表格布局时，掌握列宽属性是非常重要的。我们可以通过它来设置每一列的宽度，以确保表格在所有屏幕尺寸和设备上具有可读性和可用性。