如何隐藏表行溢出？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何隐藏表行溢出？相关的知识，希望对你有一定的参考价值。
我有一些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-layout:fixed和table上的两个属性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中测试过
通常，如果您使用white-space: nowrap;，可能是因为您知道哪些列将包含包装（或拉伸单元格）的内容。对于这些列，我通常将单元格的内容包装在具有特定span属性的class中，并应用特定的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;
}
在大多数现代浏览器中，您现在可以指定：
<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支持。 ;）
这是我尝试过的东西。基本上，我将“灵活”内容（包含太长行的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>
只有缺点（似乎），表格单元格宽度是相同的。有办法解决这个问题吗？ - Josh Stodola 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）
如果接受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/
用class =“container”将表包装在div中
div.container {
width: 100%;
overflow-x: auto;
}
然后
#table_id tr td {
white-space:nowrap;
}
结果
以上是关于如何隐藏表行溢出？的主要内容，如果未能解决你的问题，请参考以下文章