固定表格单元宽度

很多人仍然使用表来布局控件，数据等 – 这是一个stream行的jqGrid的例子。 然而，有一些魔法发生，我似乎无法理解（它的桌子大声哭喊，可能会有多less魔法？）

怎么可能设置一个表的列宽，并像jqGrid一样遵守！？ 如果我试图复制这个，即使我设置了每一个<td style='width: 20px'> ，一旦这些单元格的内容大于20像素，单元格就会展开！

任何想法或见解？

Answer 1

您可以尝试对所有行使用<col>标签pipe理表样式，但您需要在<table>或表css类上设置table-layout:fixed样式，并为单元格设置overflow样式

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

 <table class="fixed"> <col width="20px" /> <col width="30px" /> <col width="40px" /> <tr> <td>text</td> <td>text</td> <td>text</td> </tr> </table> 

这是你的CSS

 table.fixed { table-layout:fixed; } table.fixed td { overflow: hidden; } 

Answer 2

现在在HTML5 / CSS3中我们有更好的解决scheme。 在我看来，这个纯粹的CSS解决scheme是推荐的：

 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> 

Answer 3

 table td { table-layout:fixed; width:20px; overflow:hidden; word-wrap:break-word; } 

Answer 4

我有一个长桌TD单元格，这迫使桌子浏览器的边缘，看起来很难看。 我只是希望该列只能是固定的大小，并在达到指定的宽度时打破这些单词。 所以这对我很好：

 <td><div style='width: 150px;'>Text to break here</div></td> 

您不需要为表格，tr元素指定任何types的样式。 你也可以使用overflow：hidden; 正如其他答案所build议的，但是会导致多余的文本消失。

Answer 5

 table { table-layout:fixed; width:200px; } table tr { height: 20px; } 

10×10

Answer 6

 table { table-layout:fixed; } td,th { width:20px; word-wrap:break-word; } 

：第一个孩子…：第十一个孩子（1）或…