css table 列宽百分比

CSS table 是一种常用的网页布局方式，它是通过 HTML 中的 <table> 标签和 CSS 样式来实现表格布局的。

在 CSS table 中，我们经常需要设置表格中列的宽度，以便让表格更加美观和易于阅读。这时我们可以使用百分比来设置列宽。

table {
  width: 100%;
}

table td {
  width: 25%;
}

在上面的代码中，我们首先将整个表格的宽度设置为 100%，以适应不同的屏幕尺寸。然后，我们设置每个单元格的宽度为 25%，这意味着表格共有 4 列，并且每列的宽度都相等。

当然，我们也可以根据需要来设置不同的百分比。例如：

table td:first-child {
  width: 20%;
}

table td:nth-child(2) {
  width: 30%;
}

table td:nth-child(3) {
  width: 25%;
}

table td:last-child {
  width: 25%;
}

在上面的代码中，我们使用的是 CSS 的伪类选择器 :first-child、:nth-child() 和 :last-child，分别用于选择表格中的第一列、第二列、第三列和最后一列。并根据需要来设置每列的百分比宽度。

总的来说，使用百分比来设置 CSS table 的列宽是一种简单而有效的布局方法，可以让我们更加方便地控制表格的宽度和外观。同时，它也能够适应不同的屏幕尺寸和浏览器窗口大小，从而提高网页的可用性和用户体验。