如何限制表列的宽度？

表中的一列可以包含没有空格的长文本。我怎样才能把它的宽度限制在，比如说，150px？我不希望它总是150px (如果它是空的，它应该是窄的) ，但如果有一个长的文本，我希望它限制为150px 和文本被包装。

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

先谢谢你。

更新:
设置如下样式:

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

不能在 IE8中工作(在不同的计算机上测试) ，我认为它不能在任何版本的 IE 中工作。

139917 次浏览
小开

Updated

On the table's td and th tags I added:

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

Not fully compatible in every browser but a start.

小开

You should be able to style your column with:

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

Note that word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers (Chrome and Safari).

小开

You need to use width instead.

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

But just in the <thead> section.

小开

there is an option to simulate max-width:

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');
}
});
}

this function can be called on $(window).on('resize', ...) multiple times

this.$el

represents parent element, in my case I have marionette

for those th elements which should have max-width, there should be a max-width attribute like:

<th max-width="120">
小开

1) Specify width for each column in <th> according to your need.

2) Add word wrap for each <td> in <tr> of the <table>.

word-wrap: break-word;
小开

After some experimentation in Chrome I came to the following:

  • if your table has a <th> that should have either a "width" or a "max-width" set
  • the <td>'s must have set a "max-width" and "word-wrap: break-word;"

If you use a "width" in the <th> its value will be used. If you use a "max-width" in the <th> the "max-width" value of the <td>'s is used instead.

So this functionality is quite complex. And I didn't even study tables without headers or without long strings that need a "break-word".

小开

it's very easy

You could add attributes like these

max-width

max-height

They can be set in html as an attribute or in CSS as a style


提交答案