固定表格单元格宽度
固定表格单元格宽度
提问于 2010-11-15 23:21:23
很多人仍然使用表格来布局控件、数据等--其中一个例子就是流行的jqGrid。然而，有一些魔术发生了，我似乎无法理解(它的表格大声叫喊，有多少魔力可能存在？)
如何才能像jqGrid那样设置一个表的列宽并遵守它呢？如果我尝试复制这个，即使我设置了每个<td style='width: 20px'>，只要其中一个单元格的内容大于20px，单元格就会扩展！
有什么想法或见解吗？
回答 6
Stack Overflow用户
回答已采纳
发布于 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; }Stack Overflow用户
发布于 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;}最终结果
Stack Overflow用户
发布于 2010-11-15 23:27:26
table td
{
table-layout:fixed;
width:20px;
overflow:hidden;
word-wrap:break-word;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4185814
复制相关文章
相似问题
腾讯云开发者
