Html 固定表单元格宽度

很多人仍然使用表格来布局控件、数据等——流行的jqGrid就是一个例子。然而，有一些神奇的事情发生了，我似乎无法理解（它的桌子是用来大声叫喊的，可能有多少魔法？）

怎么可能像jqGrid那样设置表的列宽并遵守它呢！？如果我尝试复制这个，即使我设置了每个

，只要其中一个单元格的内容大于20px，单元格就会扩展

---

有什么想法或见解吗？

您可以尝试对所有行使用

标记管理表格样式，但您需要在

或表格css类上设置

表格布局：固定
样式，并为单元格设置
溢出
样式


10x10现在在HTML5/CSS3中，我们有了更好的解决方案。在我看来，建议使用这种纯CSS解决方案：


table.fixed{表格布局：fixed；宽度：90px；}/*设置表格宽度很重要*/
table.fixed td{overflow:hidden；}/*隐藏单元格外的文本*/
table.fixed td:nth类型（1）{width:20px；}/*设置第1列的宽度*/
table.fixed td:nth类型（2）{width:30px；}/*设置第2列的宽度*/
table.fixed td:nth类型（3）{width:40px；}/*设置第3列的宽度。*/

Veryverylongtext
事实上，它是如此之长
我们应该使用空格

：第一个孩子…：第n个孩子（1）或…
我有一个长的table td单元格，这迫使表格位于浏览器的边缘，看起来很难看。我只希望该列的大小是固定的，当它达到指定的宽度时，会打断单词。
所以这对我来说很有效：

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

此处要打断的文本

您不需要为表、tr元素指定任何类型的样式。
您也可以使用overflow:hidden；如其他答案所示，但它会导致多余的文本消失。
对于全屏宽度表：


表格宽度必须为100%

如果需要N列，那么它必须是N+1


3列的示例：
table.fixed{
表布局：固定；
宽度：100%；
}
表3.1固定运输距离{
溢出：隐藏；
}

1.
2.
3.
自由的
文本111111111
文本2222222
文本3333333
col在html5中不起作用，通过内联css或css类设置单个td的宽度。除非为所需表格明确应用宽度，否则接受的答案不起作用。无论您使用的是单位还是百分比，都能完美地工作。我想我应该指出这一点，因为@totymedli的答案没有得到任何投票，我不想让用户忽略它。然而，除非你的目标是这样，否则断字建议是不必要的。当你的行中只有一个TD元素跨越多个列时会发生什么？使用示例代码，如果您的
单独排在一行，它会是90px吗？谢谢它的帮助。对于数据重叠，请添加此
table.fixed td{word wrap:break word；}
。断字建议是不必要的，但它对其他SO用户很有用，并且与此问题非常相关，因为在大多数情况下，固定宽度表中的溢出内容几乎肯定会出现。如果您使用
colspan
插入一行，这似乎打破了这个解决方案。关于如何在包含
colspan
>1的表中使用此解决方案的任何建议？@QuantumDynamix I通过将不包含colspan的行作为第一行，仅包含所有具有宽度的单独列来修复此问题。然后我用0高度、边框：无、可见性：隐藏、填充：0px等隐藏了那一行，然后第二行是我想看到的第一行，在有colspan的地方。第一行有单独的固定宽度单元格，用于确定宽度。@totymedli如何使我的表获得所有列宽的总和？我的表格是动态生成的，因此我无法预先计算表格宽度，但我不想使用100%，因为这会拉伸一些元素。你确定可以在td元素上使用
表格布局
？@Nick-它工作正常。Hovewer我还必须添加min width和max width属性（与width的值相同），然后它就变成了真正的固定宽度。或者在需要的地方，可以使用max width而不是width。这将允许您在达到宽度限制之前不打断文本。如果文本小于指定的宽度，表格单元格将不会有空白。要在此处中断的文本
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

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

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

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

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