固定表格单元格宽度答案

【问题标题】：Fixed Table Cell Width固定表格单元格宽度
【发布时间】：2011-05-10 07:20:59
【问题描述】：

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

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

有什么想法或见解？

【问题讨论】：

标签： html css layout html-table

【解决方案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; }

【讨论】：

col 在 html5 中不起作用，设置单个 td 的宽度，而不是通过内联 css 或 css 类
除非您明确为所需表格应用宽度，否则接受的答案不起作用。无论您使用单位还是百分比，都可以完美运行。我想我会指出这一点，因为@totymedli 的回答没有得到任何投票，我不希望用户忽略它。但是，除非您的目标是这样，否则不需要分词建议。
如果行中只有 1 个跨多列的 TD 元素会发生什么情况？使用您的示例代码，如果您有 <TD colspan="3"> 本身在一行中，它会是 90px 吗？
感谢它的帮助。对于数据重叠，添加此table.fixed td { word-wrap: break-word; }。
分词建议不是必需的，但它对其他 SO 用户很有用，并且与问题非常相关，因为在大多数情况下几乎肯定会发生固定宽度表中的溢出内容.

【解决方案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;}

最终结果

【讨论】：

如果您使用colspan 输入一行，这似乎会破坏此解决方案。有关如何将此解决方案与包含 colspan > 1 的表一起使用的任何建议？
@QuantumDynamix 我通过包含第一行来解决这个问题，一行没有 colspans，只有所有具有宽度的单独列。然后我用 0 高度、边框：无、可见性：隐藏、填充：0px 等隐藏了该行，然后第二行是我想看到的第一行，那里有 colspans。具有单个固定宽度单元格的第一行确定宽度。
@totymedli 有什么想法可以让我的表格占据我所有列宽的总和吗？我的表格是动态生成的，所以我无法提前计算表格宽度，但我不想使用 100%，因为这会拉伸一些元素。

【解决方案3】：

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

【讨论】：

您确定可以在 td 元素上使用 table-layout 吗？
@Nick - 它工作正常。但是我还必须添加 min-width 和 max-width 属性（与宽度相同的值），然后它就变成了真正的固定宽度。

【解决方案4】：

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

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

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

【讨论】：

或者你可以在需要的地方使用 max-width 而不是 width 。这将允许您不破坏文本，除非您达到宽度限制。如果您的文本小于指定宽度，表格单元格将不会有空白空间。
这里要打断的文字

【解决方案5】：

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

10x10

【讨论】：

【解决方案6】：

对于全屏宽度表：

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

【讨论】：

【解决方案7】：

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

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

【讨论】：