it-swarm.cn

如何限制表格列宽?

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

这是一个测试示例: http://jsfiddle.net/Kh378/ (让我们限制第3列)。

先感谢您。

更新:
设置此样式:

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

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

54
nightcoder

更新

在表的tdth标签上我添加了:

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

在每个浏览器中都不完全兼容,但一开始。

59
Brandon

你需要使用宽度。

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

但只是在<thead>部分。

5
Carlos Toledo

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

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

请注意,IE 5.5 +,Firefox 3.5+和WebKit浏览器(Chrome和Safari)支持Word-wrap

3
isNaN1247

在Chrome中进行了一些实验后,我得出以下结论:

  • 如果你的表有一个<th>,它应该设置“width”或“max-width”
  • <td>必须设置“max-width”和“Word-wrap:break-Word;”

如果在<th>中使用“width”,则将使用其值。如果在<th>中使用“max-width”,则使用<td>的“max-width”值。

所以这个功能非常复杂。而且我甚至没有学习没有标题的表格或者没有需要“破解词”的长字符串。

2
user2587656

这很容易

您可以添加这些属性

最大宽度

最大高度

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

1
Kano

有一个模拟最大宽度的选项:

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">
0
user2846569

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

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

Word-wrap: break-Word;
0
Amay Kulkarni