相等大小的表格单元格填充整个宽度的持有表 [英] Equal sized table cells to fill entire width of holding table

问题描述

有没有办法使用HTML / CSS（使用相对尺寸）使一行单元格遍布其中包含的表的整个宽度？

Is there a way using HTML/CSS (with relative sizing) to make a row of cells stretch the entire width of the table within which it is contained?

单元格应该具有相等的宽度，并且外部表格大小也是动态的，< table width =100％> 。

The cells should be equal widths and the outer table size is also dynamic with <table width="100%">.

目前如果我没有指定一个固定的大小;

Currently if I don't specify a fixed size; the cells just autosize to fit their contents.

推荐答案

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

Just use percentage widths and fixed table layout:

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

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

固定表格布局很重要，否则浏览器会调整宽度，

Fixed table layout is important as otherwise the browser will adjust the widths as it sees fit if the contents don't fit ie the widths are otherwise a suggestion not a rule without fixed table layout.

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

Obviously, adjust the CSS to fit your circumstances, which usually means applying the styling only to a tables with a given class or possibly with a given ID.

这篇关于相等大小的表格单元格填充整个宽度的持有表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！