固定表格单元格宽度

Question

很多人仍然使用表来布局控件，数据等。这个例子就是流行的jqGrid。但是，有一些神奇的事情我似乎无法理解（它的桌子大声喊叫，可能有多少魔法？）

如何设置表的列宽并让它像jqGrid一样服从！？如果我尝试复制它，即使我设置每个<td style='width: 20px'>，只要其中一个单元格的内容大于20px，单元格就会扩展！

任何想法或见解？

Answer 1

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

overflow

这是你的CSS

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

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元素指定任何类型的样式。 你也可以使用overflow：hidden;正如其他答案所暗示的那样，它会导致多余的文本消失。

Answer 5

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

10×10

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

：第一个孩子......：nth-​​child（1）或......