Html 如何限制表格列宽？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7410784/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I limit table column width?
提问by nightcoder
One of the columns in my table can contain a long text without whitespaces. How can I limit its width to, say, 150px? I don't want it to be 150px always (if it's empty it should be narrow), but if there is a long text I want it to be limited with 150px and the text to be wrapped.
我的表中的一列可以包含没有空格的长文本。如何将其宽度限制为 150 像素？我不希望它总是 150px（如果它是空的，它应该是窄的），但是如果有很长的文本，我希望它被限制为 150px 和要换行的文本。
Here is a test example: http://jsfiddle.net/Kh378/(let's limit the 3rd column).
这是一个测试示例：http: //jsfiddle.net/Kh378/（让我们限制第三列）。
Thank you in advance.
先感谢您。
Update:
Setting this styles:
更新：
设置此样式：
word-wrap: break-word;
max-width: 150px;
does not work in IE8 (tested on different computers) and I suppose it does not work in any version of IE.
在 IE8 中不起作用（在不同的计算机上测试），我想它在任何版本的 IE 中都不起作用。
回答by Brandon
回答by Carlos Toledo
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.
但只是在<thead>部分。
回答by isNaN1247
You should be able to style your column with:
您应该能够使用以下样式设置您的列：
max-width: 150px;
word-wrap: break-word;
Note that word-wrapis supported in IE 5.5+, Firefox 3.5+, and WebKit browsers (Chrome and Safari).
请注意，word-wrap它在 IE 5.5+、Firefox 3.5+ 和 WebKit 浏览器（Chrome 和 Safari）中受支持。
回答by user2587656
After some experimentation in Chrome I came to the following:
在 Chrome 中进行了一些实验后，我得出了以下结论：
- 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;"
- 如果你的表有一个
<th>应该有“宽度”或“最大宽度”集 - 所述
<td>的必须设置‘最大宽度’和‘自动换行：断字;’
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.
如果您在<th>其值中使用“宽度”，则将使用该值。如果您<th>在<td>'s的“max-width”值中使用“max-width”，则使用该值。
So this functionality is quite complex. And I didn't even study tables without headers or without long strings that need a "break-word".
所以这个功能相当复杂。而且我什至没有研究没有标题或没有需要“断字”的长字符串的表格。
回答by user2846569
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
这个函数可以在 $(window).on('resize', ...) 上多次调用
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:
对于那些应该具有 max-width 的元素，应该有一个 max-width 属性，例如：
<th max-width="120">
回答by Amay Kulkarni
1) Specify width for each column in <th>according to your need.
1）<th>根据您的需要指定每列的宽度。
2) Add word wrap for each <td>in <tr>of the <table>.
2) 为每个<td>in添加自动换<tr>行<table>。
word-wrap: break-word;
回答by Kano
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
它们可以在 html 中设置为属性或在 CSS 中设置为样式
