相同大小的表格单元格填充包含表格的整个宽度

Posted 2023-03-05

【中文标题】相同大小的表格单元格填充包含表格的整个宽度

【英文标题】：Equal sized table cells to fill the entire width of the containing table

【发布时间】：2010-11-30 06:19:39

【问题描述】：

有没有办法使用 html/CSS（具有相对大小）使一行单元格拉伸它所在表格的整个宽度？

单元格的宽度应该相等，外部表格的大小也是动态的，<table width="100%">。

目前如果我没有指定固定大小；单元格会自动调整大小以适应其内容。

【参考方案1】：

您甚至不必为单元格设置特定的宽度，table-layout: fixed 足以均匀分布单元格。

ul 
    width: 100%;
    display: table;
    table-layout: fixed;
    border-collapse: collapse;

li 
    display: table-cell;
    text-align: center;
    border: 1px solid hotpink;
    vertical-align: middle;
    word-wrap: break-word;

<ul>
  <li>foo<br>foo</li>
  <li>barbarbarbarbar</li>
  <li>baz</li>
</ul>

请注意，要使table-layout 工作，表格样式元素必须设置宽度（在我的示例中为 100%）。

【讨论】：

这个解决方案更好，甚至可以使用动态生成的列

如果一个字符串超过了 td max 宽度，你就有麻烦了

添加word-wrap:break-word 将解决这个问题，正如我刚刚发现的那样

【参考方案2】：

只需使用百分比宽度和fixed table layout：

<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
</table>

与

table  table-layout: fixed; 
td  width: 33%; 

固定的表格布局很重要，否则如果内容不合适，浏览器将调整其认为合适的宽度，即宽度是一个建议，而不是没有固定表格布局的规则。

显然，调整 CSS 以适应您的情况，这通常意味着仅将样式应用于具有给定类或可能具有给定 ID 的表。

【讨论】：

并确保您是 td 选择器没有选择其他涉及的 td :D

你不需要设置 td 的宽度，因为你可能有动态的列数......而且没有它也可以工作。

【参考方案3】：

将table-layout: fixed 用作table 的属性，将width: calc(100%/3); 用作td 的属性（假设有3 个td）。设置这两个属性后，表格单元格的大小将相等。

请参阅demo。

【讨论】：

你不需要他们两个，单独的解决方案就足够了。

【参考方案4】：

只需将此行添加到您的表格样式中：

#table_name
    table-layout: fixed;
    width: 100%;

codepan 上有一个很好的例子。

这是一个较晚的答案，但它将有助于将来的搜索。