如何将表格列的宽度设置为固定值？答案

【问题标题】：How to set the width of my table columns to a fixed value?如何将表格列的宽度设置为固定值？
【发布时间】：2011-08-19 03:01:58
【问题描述】：

我现在面临一个相当困难的问题；非常感谢您的帮助。

我有一个包含 2 列 td1 和 td2 的表格，其中包含文本，并且两者都有固定的宽度。

td1.width = 10px 和 td2.width = 20px

在运行时使用JQuery从左开始一个一个地设置固定宽度（因为这个表嵌套在另一个表中......）

文本宽度可能比这些固定宽度长，在这种情况下，预期的行为是

列的固定宽度应该保持不变1）如果有额外的文本，文本应该换行，它不应该增加或减少td宽度2）如果有空格，单元格宽度应该调整其他列或页面大小时不会缩小；它应该保持原样。

我已将 td.whitespace 属性设置为 pre-wrap 和 td.word-wrap: break-word 但它们没有帮助。

使用 css 2.0（不是 3.0）如何实现这些？

谢谢，

【问题讨论】：

【解决方案1】：

在这种情况下，因为宽度非常小，而且文本通常没有那么小的单词，所以它无法将它们换行，所以即使设置了宽度，它也会扩展td 的宽度！

它减小了第二个td 的宽度，因为第一个使用了额外的宽度。

此外，您可能会遇到文本太宽（例如长单词）的情况，在这种情况下无法换行。除非使用 javascript，否则 IMO 是唯一的方法。

我建议阅读以下答案：HTML TD wrap text

【讨论】：

我设置了 table-layout:fixed, white-space: pre-wrap 并且现在在 IE 9.0 中已经修复了。但是，在 IE 6.0 中，它看起来很糟糕，并且列宽被弄乱了。 IE 6.0 兼容性的任何解决方案？
@William 它在 IE9 中工作是一个奇迹，在 IE6 中，CSS 支持更加有限，我怀疑有任何 (css) 方法可以做到这一点。
是的，我需要一个奇迹来完成这项工作或知道如何做到这一点！

【解决方案2】：

好的，我解决了。我的桌子上有thead 和colgroups。虽然它们的显示属性是隐藏的，但 IE 9.0 会忽略它，而 IE 6.0 在计算列宽时会考虑它们！

我使用 jquery 将它们删除并整理出来！

$('.myTable thead, .myTable colgroup').remove();

【讨论】：