如何隐藏表格行溢出？答案

【问题标题】：How to hide Table Row Overflow?如何隐藏表格行溢出？
【发布时间】：2010-12-06 00:15:41
【问题描述】：

我有一些 html 表格，其中的文本数据太大而无法容纳。因此，它会垂直扩展单元格以适应这种情况。所以现在有溢出的行是数据量较少的行的两倍。这是无法接受的。如何强制表格具有与1em 相同的行高？

这里有一些重现问题的标记。表格应该只有一行的高度，并隐藏溢出的文本。

<!DOCTYPE html>

<html>
  <head>
    <title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
      table { width:250px; }
      table tr { height:1em; overflow:hidden; }
    </style>
  </head>
  <body>
    <table border="1">
      <tr>
        <td>This is a test.</td>
        <td>Do you see what I mean?</td>
        <td>I hate this overflow.</td>
      </tr>
    </table>
  </body>
</html>

【问题讨论】：

您使用 <table> 而不是使用 divs/spans+CSS 的任何特殊原因？第二种方法更难正确，但提供了更大的灵活性。我不确定是否可以使用常规表来做你想做的事情。
我正在使用table，因为我正在显示表格数据！

标签： html css html-table

【解决方案1】：

需要指定两个属性，table 上的table-layout:fixed 和单元格上的white-space:nowrap;。您还需要将overflow:hidden; 也移动到单元格中

table { width:250px;table-layout:fixed; }
table tr { height:1em;  }
td { overflow:hidden;white-space:nowrap;  }

Here's a Demo 。在 Firefox 3.5.3 和 IE 7 中测试

【讨论】：

唯一的缺点（看起来）是表格单元格的宽度是相同的。有什么办法可以解决这个问题？
据我所知 - 我相信浏览器部分做了一个假设，即由于没有定义单独的单元格宽度，因此在单元格数量中平均分割表格宽度。我能想到的唯一可能的解决方法是根据每个单元格包含的字符数（在所有单元格的字符总数中）计算每个单元格的宽度，无论是服务器端还是客户端（前者可能是性能更高的选择）。这听起来是不是有点矫枉过正？
我在上一条评论中的意思是我在相关行中所有单元格中的总字符数 :)
是的，我认为这太过分了。我希望我能在没有table-layout:fixed 的情况下让它工作，那将是理想的。
@Josh - 删除 table-layout:fixed 会阻止隐藏溢出的文本，但结果是表格宽度会增加。浏览器如何知道每个单元格的宽度（没有为每个单元格指定宽度）？我是不是误解了你的要求？

【解决方案2】：

唯一的缺点（似乎）是表格单元格宽度相同。任何解决这个问题的方法？ ——乔什·斯托多拉 10 月 12 日 15:53

只需定义表格的宽度和每个表格单元格的宽度

类似

table {border-collapse:collapse; table-layout:fixed; width:900px;}
th {background: yellow; }
td {overflow:hidden;white-space:nowrap; }
.cells1{width:300px;}
.cells2{width:500px;}
.cells3{width:200px;}

它就像一个魅力:o)

【讨论】：

但是宽度会根据要在其中显示的数据量而波动。这不像我在这里使用等宽字体！

【解决方案3】：

一般来说，如果您使用white-space: nowrap;，可能是因为您知道哪些列将包含包裹（或拉伸单元格）的内容。对于这些列，我通常将单元格的内容包装在具有特定 class 属性的 span 中，并应用特定的 width。

例子：

HTML：

<td><span class="description">My really long description</span></td>

CSS：

span.description {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 150px;
}

【讨论】：

谢谢，这很有帮助。
比固定整个表格更好的方法。
这不适用于百分比宽度，例如响应式设计。理想情况下，我想将此列设置为 100% 宽度，并在调整页面大小时相应地调整溢出。有解决此问题的提示吗？
哇，老线程，但是嘿——在我的用例中，我还希望标记不要驻留在 TD 元素的 innerHtml 中——因为我有允许用户下载表格数据的 javascript。同样，它是表格中的表格数据——不是标记的内容——在我的例子中。

【解决方案4】：

在大多数现代浏览器中，您现在可以指定：

<table>
 <colgroup>
  <col width="100px" />
  <col width="200px" />
  <col width="145px" />
 </colgroup>
 <thead>
  <tr>
   <th>My 100px header</th>
   <th>My 200px header</th>
   <th>My 145px header</th>
  </tr>
 </thead>
 <tbody>
  <td>100px is all you get - anything more hides due to overflow.</td>
  <td>200px is all you get - anything more hides due to overflow.</td>
  <td>100px is all you get - anything more hides due to overflow.</td>
 </tbody>
</table>

那么如果你应用上面帖子中的样式，如下：

table {
    table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
    overflow: hidden;
    white-space: nowrap;
}

结果为您在整个表格中提供了很好的隐藏溢出。适用于最新的 Chrome、Safari、Firefox 和 IE。在 9 之前我没有在 IE 中测试过——但我的猜测是它会在 7 之前运行，你甚至可能会幸运地看到 5.5 或 6 的支持。 ;)

【讨论】：

【解决方案5】：

如果接受 javascript 作为答案，我制作了一个 jQuery 插件来解决这个问题（有关该问题的更多信息，请参阅 CSS: Truncate table cells, but fit as much as possible）。

要使用插件，只需键入

$('selector').tableoverflow();

插件： https://github.com/marcogrcr/jquery-tableoverflow

完整示例： http://jsfiddle.net/Cw7TD/3/embedded/result/

【讨论】：

【解决方案6】：

这是我尝试过的。基本上，我将“灵活”内容（包含太长行的 td）放在一个 div 容器中，该容器只有一行高，隐藏溢出。然后我让文字包裹到无形之中。不过，你会在断词处得到休息，而不仅仅是平滑的中断。

table {
    width: 100%;
}

.hideend {
    white-space: normal;
    overflow: hidden;
    max-height: 1.2em;
    min-width: 50px;
}
.showall {
    white-space:nowrap;
}

<table>
    <tr>
        <td><div class="showall">Show all</div></td>
        <td>
            <div class="hideend">Be a bit flexible about hiding stuff in a long sentence</div>
        </td>
        <td>
            <div class="showall">Show all this too</div>
        </td>
    </tr>
</table>

【讨论】：

我应该补充一点，这里的优点是我不需要设置任何列的绝对宽度。设计流畅。
这里的问题是，你怎么知道给哪个单元分配哪个类？除非您手动键入您需要的每个页面，Web 1.0 风格，否则这不是一个包罗万象的解决方案。

【解决方案7】：

用 class="container"

将表格包装在 div 中

div.container {
    width: 100%;
    overflow-x: auto;
}

然后

#table_id tr td {
   white-space:nowrap;
}

结果

【讨论】：