Question

我表格中的一列可以包含没有空格的长文本。如何将宽度限制为150px？我不希望它总是150px（如果它是空的它应该是窄的），但如果有一个长文本我希望它被限制为150px和要包装的文本。

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

提前谢谢。

更新
设置此样式：

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

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

Answer 1

Updated

在表格的td和th标签上，我添加了：

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

在每个浏览器中都不是完全兼容，而是一个开始。

Answer 2

您需要使用宽度。

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

但只是在<thead>部分。

Answer 3

您应该能够使用以下方式设置列的样式：

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

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

Answer 4

在Chrome中进行了一些实验后，我发现了以下内容：

如果您的表格中有<th>，其宽度应为＆＃34;＆＃34;或者＆＃34; max-width＆＃34;设置
<td>必须设置＆＃34; max-width＆＃34;和＆＃34;自动换行：break-word;＆＃34;

如果你使用＆＃34;宽度＆＃34;在<th>中将使用其值。如果你使用＆＃34; max-width＆＃34;在<th>＆＃34; max-width＆＃34;而是使用<td>的值。

所以这个功能非常复杂。而且我甚至没有学习没有标题的表格，也没有长字符串需要＆＃34;破解字＃34;

Answer 5

非常简单

您可以添加类似

的属性

max-width

max-height

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

Answer 6

可以选择模拟最大宽度：

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

表示父元素，在我的情况下，我有木偶

对于那些应该具有max-width的元素，应该有一个max-width属性，如：

<th max-width="120">

Answer 7

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

2）为<td>的{{1}}中的每个<tr>添加自动换行。

<table>

如何限制表格列宽？

7 个答案: