如何隐藏表格行溢出？
Posted
技术标签:
【中文标题】如何隐藏表格行溢出？【英文标题】：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，因为我正在显示表格数据！
【参考方案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;
.cells1width:300px;
.cells2width:500px;
.cells3width: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 />
<col />
<col />
</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;
结果
【讨论】：
以上是关于如何隐藏表格行溢出？的主要内容，如果未能解决你的问题，请参考以下文章