固定表格单元宽度

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

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

任何想法或见解?

您可以尝试对所有行使用<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; } 

现在在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> 
 table td { table-layout:fixed; width:20px; overflow:hidden; word-wrap:break-word; } 

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

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

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

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

10×10

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

:第一个孩子…:第十一个孩子(1)或…