如何隐藏表行溢出？
如何隐藏表行溢出？
提问于 2009-10-12 14:34:21
我有一些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>回答 2
Stack Overflow用户
发布于 2012-06-14 05:15:21
在大多数现代浏览器中，您现在可以指定：
<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的支持。;)
Stack Overflow用户
发布于 2014-02-27 16:52:54
这是我试过的东西。基本上，我将“灵活”内容(包含过长行的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1554928
复制相关文章
相似问题