HTML 表格 - 固定和多个可变列宽

Question

我必须构建一个包含 5 列的表。表格宽度是可变的(内容宽度的 50%)。一些列包含固定大小的按钮，因此这些列应该有一个固定大小，比如 100px。有些列中包含文本，因此我希望这些列具有可变的列宽。

例如:

第 1 列:(tablewidth - sum(fixedwidth_columns)) 的 20%

第 2 列:100px

第 3 列:(tablewidth - sum(fixedwidth_columns)) 的 40%

第 4 列:200px

第 5 列:(tablewidth - sum(fixedwidth_columns)) 的 40%

实现此目标的最佳方法是什么？

Answer 1

您可以设置 table-layout: fixed 对于 table元素，然后简单地设置 width相关属性 <td>或 <th>元素:

table {
    table-layout: fixed;
}

JSFiddle Demo .

来自MDN :

The table-layout CSS property defines the algorithm to be used to layout the table cells, rows, and columns.

值(value)观:

fixed:
Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.