很多人仍然使用表格来布局控件、数据等--其中一个例子就是流行的jqGrid。然而,有一些魔术发生了,我似乎无法理解(它的表格大声叫喊,有多少魔力可能存在?)
如何才能像jqGrid那样设置一个表的列宽并遵守它呢?如果我尝试复制这个,即使我设置了每个<td style='width: 20px'>
,只要其中一个单元格的内容大于20px,单元格就会扩展!
有什么想法或见解吗?
发布于 2010-11-15 23:27:04
您可以尝试对所有行使用<col>
标记管理表样式,但需要在<table>
或tables css类上设置table-layout:fixed
样式,并为单元格设置overflow
样式
http://www.w3schools.com/TAGS/tag_col.asp
<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; }
发布于 2013-06-28 14:42:54
现在在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>
即使在haunter's solution中,也需要设置表的width
。否则它就不能工作。
vsync建议的另一个新的CSS3特性是:word-break:break-all;
。这也会将没有空格的单词分成多行。只需像这样修改代码:
table.fixed { table-layout:fixed; width:90px; word-break:break-all;}
最终结果
发布于 2010-11-15 23:27:26
table td
{
table-layout:fixed;
width:20px;
overflow:hidden;
word-wrap:break-word;
}
https://stackoverflow.com/questions/4185814
复制相似问题