固定表单元格宽度

Question

许多人仍然使用表格来布局控件，数据等。-流行的jqGrid就是一个例子。但是，发生了一些我似乎无法理解的魔术（它的桌子大声喊叫，可能会有多少魔术？）如何设置表的列宽并使它像jqGrid那样遵守！？如果我尝试复制此内容，即使我设置了every <td style='width: 20px'>，只要这些单元格之一的内容大于20px，该单元格就会展开！有什么想法或见解吗？

Answer 1

现在在HTML5 / CSS3中，我们为该问题提供了更好的解决方案。我认为建议使用这种纯CSS解决方案：

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/

table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/

table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/

table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/

table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/

<table class="fixed">

    <tr>

        <td>Veryverylongtext</td>

        <td>Actuallythistextismuchlongeeeeeer</td>

        <td>We should use spaces tooooooooooooo</td>

    </tr>

</table>

您需要width在困扰解决方案中设置表的偶数。否则它将无法正常工作。vsync建议的

另一个CSS3新功能是：。这会将单词中没有空格的单词也分成多行。只需像这样修改代码：word-break:break-all;

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}