Html 固定表格单元格宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4185814/
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
Fixed Table Cell Width
提问by Jimbo
A lot of people still use tables to layout controls, data etc. - one example of this is the popular jqGrid. However, there is some magic happening that I cant seem to fathom (its tables for crying out loud, how much magic could there possibly be?)
许多人仍然使用表格来布局控件、数据等。流行的 jqGrid 就是一个例子。然而，发生了一些我似乎无法理解的魔法（它的桌子大声喊叫，可能有多少魔法？）
How is it possible to set a table's column width and have it obeyed like jqGrid does!? If I try to replicate this, even if I set every <td style='width: 20px'>, as soon as the content of one of those cells is greater than 20px, the cell expands!
如何设置表格的列宽并像 jqGrid 那样遵守它！？如果我尝试复制这个，即使我设置了 every <td style='width: 20px'>，只要这些单元格之一的内容大于 20px，单元格就会扩展！
Any ideas or insights?
任何想法或见解？
回答by hunter
You could try using the <col>tag manage table styling for all rows but you will need to set the table-layout:fixedstyle on the <table>or the tables css class and set the overflowstyle for the cells
您可以尝试<col>对所有行使用标签管理表格样式，但您需要table-layout:fixed在<table>或 表格 css 类上设置overflow样式并为单元格设置样式
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col
<table class="fixed">
<col width="20px" />
<col width="30px" />
<col width="40px" />
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
and this be your CSS
这是你的 CSS
table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }
回答by totymedli
Now in HTML5/CSS3 we have better solution for the problem. In my opinion this purely CSS solution is recommended:
现在在 HTML5/CSS3 中我们有更好的解决方案。在我看来，推荐这种纯 CSS 解决方案：
table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/<table class="fixed">
<tr>
<td>Veryverylongtext</td>
<td>Actuallythistextismuchlongeeeeeer</td>
<td>We should use spaces tooooooooooooo</td>
</tr>
</table>You need to set the table's widtheven in haunter's solution. Otherwise it doesn't work.
Also a new CSS3 feature that vsyncsuggested is: word-break:break-all;. This will break the words without spaces in them to multiple lines too. Just modify the code like this:
您需要width在haunter's solution 中设置桌子。否则它不起作用。
也是一个新的CSS3功能，VSYNC建议是：word-break:break-all;。这也会将其中没有空格的单词分解为多行。只需像这样修改代码：
table.fixed { table-layout:fixed; width:90px; word-break:break-all;}
Final result
最后结果
回答by ajreal
table td
{
table-layout:fixed;
width:20px;
overflow:hidden;
word-wrap:break-word;
}
回答by Tarik
I had one long table td cell, this forced the table to the edges of the browser and looked ugly. I just wanted that column to be fixed size only and break the words when it reaches the specified width. So this worked well for me:
我有一个长表格 td 单元格，这迫使表格到浏览器的边缘并且看起来很难看。我只是希望该列只有固定大小，并在达到指定宽度时打破单词。所以这对我来说效果很好：
<td><div style='width: 150px;'>Text to break here</div></td>
You don't need to specify any kind of style to table, tr elements. You may also use overflow:hidden; as suggested by other answers but it causes for the excess text to disappear.
您不需要为 table, tr 元素指定任何类型的样式。您也可以使用溢出：隐藏；正如其他答案所建议的那样，但它会导致多余的文本消失。
回答by user1993774
table {
table-layout:fixed; width:200px;
}
table tr {
height: 20px;
}
10x10
10x10
回答by xhdix
table
{
table-layout:fixed;
}
td,th
{
width:20px;
word-wrap:break-word;
}
:first-child ... :nth-child(1) or ...
:first-child ... :nth-child(1) 或 ...
