固定表格单元格宽度

Question

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

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

任何想法或见解？

Answer 1

你可以尝试使用的<col>标签管理表造型的所有行,但你将需要设置table-layout:fixed的样式<table>或表CSS类设置overflow样式为单元

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>

这就是你的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>

width即使在haunter的解决方案中,您也需要设置表格.否则它不起作用.
另外一个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

对于全屏宽度表：

• 表格宽度必须为 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>