固定表单元格宽度

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

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

有什么想法或见解吗？

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

https://developer.mozilla.org/zh-CN/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>

这是你的CSS

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

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

您需要width在困扰解决方案中设置表的偶数。否则，它将无法正常工作。vsync建议的
另一个CSS3新功能是：。这会将单词中没有空格的单词也分成多行。只需像这样修改代码：word-break:break-all;

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

最后结果

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

我有一个很长的表td单元格，这将表强行拉到浏览器的边缘，看上去很难看。我只希望该列仅固定大小，并在达到指定宽度时打断单词。因此，这对我来说效果很好：

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

您无需为表tr元素指定任何样式。您也可以使用overflow：hidden; 正如其他答案所建议的那样，但这会使多余的文本消失。

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

10x10

对于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>

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

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