如何限制表格列宽？答案

【问题标题】：How can I limit table column width?如何限制表格列宽？
【发布时间】：2011-11-16 16:03:26
【问题描述】：

我的表中的一列可以包含没有空格的长文本。如何将其宽度限制为 150 像素？我不希望它总是 150 像素（如果它是空的，它应该是窄的），但如果有很长的文本，我希望它被限制为 150 像素并且要换行。

这是一个测试示例：http://jsfiddle.net/Kh378/（我们限制第 3 列）。

提前谢谢你。

更新：
设置此样式：

word-wrap: break-word;
max-width: 150px;

在 IE8 中不起作用（在不同的计算机上测试），我想它在任何版本的 IE 中都不起作用。

【问题讨论】：

由于这个问题已经快三年了，目前还没有赏金，我想知道它是否还需要答案？
问题已在another StackOverflow thread 中得到解答。简而言之，您应该只使用宽度而不是最大宽度。
@Frank Conijn，是的，确实如此！ :)
虽然2年后回复
答案不会改变，所以年龄无关紧要:)

标签： html css internet-explorer css-tables

【解决方案1】：

Updated

在我添加的桌子的td 和th 标签上：

word-wrap: break-word;
max-width: 150px;

并非在所有浏览器中都完全兼容，但只是一个开始。

【讨论】：

不幸的是，它在 IE8 中不起作用（我想它在任何版本的 IE 中都不起作用......）。
这个可以按百分比来做吗，因为它只在我这边作为px生效...

【解决方案2】：

您需要改用宽度。

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>                
            <th style="width: 150px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

但只是在<thead> 部分。

【讨论】：

如果您没有<thead> 部分怎么办？

【解决方案3】：

您应该能够为您的列设置样式：

max-width: 150px; 
word-wrap: break-word;

请注意，IE 5.5+、Firefox 3.5+ 和 WebKit 浏览器（Chrome 和 Safari）支持 word-wrap。

【讨论】：

在此页面stackoverflow.com/a/24620364/2255628 的类似/等效解决方案中更详细地查看此内容，尤其是最大宽度和（当前）那里的问题。

【解决方案4】：

在 Chrome 中进行一些实验后，我得出以下结论：

如果您的表格有一个<th> 应该有一个“宽度”或一个“最大宽度”设置
<td> 必须设置了“max-width”和“word-wrap: break-word;”

如果您在<th> 中使用“宽度”，则将使用其值。如果您在<th> 中使用“最大宽度”，则使用<td> 的“最大宽度”值。

所以这个功能相当复杂。而且我什至没有研究没有标题或没有需要“断词”的长字符串的表格。

【讨论】：

【解决方案5】：

有一个选项可以模拟最大宽度：

simulateMaxWidth: function() {
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell
    this.$el.find('th').each(function(ind, th) {
        var el = $(th);
        var maxWidth = el.attr('max-width');
        if (maxWidth && el.width() > maxWidth) {
            el.css('width', maxWidth + 'px');
        }
    });
}

这个函数可以在 $(window).on('resize', ...) 上多次调用

this.$el

代表父元素，在我的例子中我有木偶

对于那些应该有最大宽度的元素，应该有一个最大宽度属性，如：

<th max-width="120">

【讨论】：

【解决方案6】：

1) 根据需要为<th>中的每一列指定宽度。

2) 为<table> 的<tr> 中的每个<td> 添加自动换行。

word-wrap: break-word;

【讨论】：

【解决方案7】：

很简单

你可以添加这样的属性

最大宽度

最大高度

它们可以在 html 中作为属性设置，也可以在 CSS 中作为样式设置

【讨论】：