等大小的表格单元格,以填充保持表的整个宽度

Question

有没有办法使用HTML/CSS(具有相对大小)来使一行单元格拉伸包含它的表的整个宽度？

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

目前,如果我没有指定固定的大小; 细胞只是自动调整以适应其内容.

Answer 1

您甚至不必为细胞设置特定的宽度,table-layout: fixed足以均匀地扩散细胞.看看这个jsfiddle,在IE8上测试过.

请注意,table-layout要工作,表样式元素必须设置宽度(在我的示例中为100%).

Answer 2

只需使用百分比宽度和固定表格布局:

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

同

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

固定的表格布局很重要,否则如果内容不合适,浏览器将根据其认为合适的宽度进行调整,否则宽度不是没有固定表格布局的建议.

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

Answer 3

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

请参阅演示。