固定表格单元格宽度

Question

许多人仍然使用表格来布局控件、数据等。流行的 jqGrid 就是一个例子。 然而，发生了一些我似乎无法理解的魔法（它的桌子大声喊叫，可能有多少魔法？）

如何设置表格的列宽并像 jqGrid 那样遵守它！？ 如果我尝试复制这一点，即使我设置了每个<td style='width: 20px'> ，只要这些单元格之一的内容大于 20px，单元格就会扩展！

任何想法或见解？

Answer 1

您可以尝试使用<col>标签管理所有行的表格样式，但您需要在<table>或表格 css 类上设置table-layout:fixed样式并为单元格设置overflow样式

http://www.w3schools.com/TAGS/tag_col.asp

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

这是你的 CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

Answer 2

现在在 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>

即使在haunter's solution 中，您也需要设置桌子的width 。 否则它不起作用。
vsync建议的另外一个新的 CSS3 特性是： word-break:break-all; . 这也会将其中没有空格的单词分解为多行。 只需像这样修改代码：

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

最后结果

Answer 3

table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

Answer 4

我有一个长表格 td 单元格，这迫使表格到浏览器的边缘并且看起来很难看。 我只是希望该列只有固定大小，并在达到指定宽度时打破单词。 所以这对我来说效果很好：

<td><div style='width: 150px;'>Text to break here</div></td>

您不需要为 table, tr 元素指定任何类型的样式。 您也可以使用溢出：隐藏； 正如其他答案所建议的那样，但它会导致多余的文本消失。

Answer 5

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

Answer 6

对于 FULLSCREEN 宽度表：

• 表格宽度必须为 100%

• 如果需要 N 列，那么 TH 必须是 N+1

3列的示例：

 table.fixed { table-layout: fixed; width: 100%; } table.fixed td { overflow: hidden; }

 <table class="fixed"> <col width=20 /> <col width=20 /> <col width=20 /> <tr> <th>1</th> <th>2</th> <th>3</th> <th>FREE</th> </tr> <tr> <td>text111111111</td> <td>text222222222</td> <td>text3333333</td> </tr> </table>

Answer 7

table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

:first-child ... :nth-child(1) 或 ...