CSS 表格宽度

在网页设计中，表格是常用的一种展示形式。为了控制表格的宽度，我们可以使用 CSS 中的宽度属性来实现。

设置表格宽度

通过设置表格的宽度属性，可以控制表格的宽度。常用的宽度属性有：

• width：设置表格的宽度。
• min-width：设置表格的最小宽度。
• max-width：设置表格的最大宽度。

table {
  width: 100%;
  max-width: 600px;
  min-width: 300px;
}

上述代码将表格的宽度设置为父元素的宽度，最大宽度为 600 像素，最小宽度为 300 像素。

设置列宽

在实际开发中，经常需要为表格的列设置宽度。可以通过以下方式来实现：

设置单个列的宽度

th:first-child, td:first-child {
  width: 100px;
}

上述代码将第一列的宽度设置为 100 像素。

设置所有列的宽度

th, td {
  width: 100px;
}

上述代码将表格的所有列的宽度设置为 100 像素。

设置不同列的宽度

th:nth-child(1), td:nth-child(1) {
  width: 200px;
}
th:nth-child(2), td:nth-child(2) {
  width: 300px;
}
th:nth-child(3), td:nth-child(3) {
  width: 100px;
}

上述代码将第一列宽度设置为 200 像素，第二列宽度设置为 300 像素，第三列宽度设置为 100 像素。

总结

控制表格的宽度是网页设计中的一个重要问题。通过设置表格和列的宽度属性，可以实现灵活的布局。使用时需要根据实际场景来灵活运用。