Html 如何隐藏表格行溢出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1554928/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide Table Row Overflow?
提问by Josh Stodola
I have some html tables where the textual data is too large to fit. So, it expands the cell vertically to accommodate for this. So now rows that have the overflow are twice as tall as rows with smaller amounts of data. This is unacceptable. How can I force table to have the same row height of 1em?
我有一些 html 表格，其中的文本数据太大而无法容纳。因此，它会垂直扩展单元格以适应此情况。所以现在有溢出的行是数据量较小的行的两倍高。这是无法接受的。如何强制表具有相同的行高1em？
Here is some markup that reproduces the problem. Table should only be the height of one line, with the overflowing text hidden.
这是一些重现问题的标记。表格应该只有一行的高度，并隐藏溢出的文本。
<!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>
回答by Russ Cam
Need to specify two attributes, table-layout:fixedon tableand white-space:nowrap;on the cells. You also need to move the overflow:hidden;to the cells too
需要指定两个属性，table-layout:fixedontable和white-space:nowrap;on the cell。您还需要将 移动overflow:hidden;到单元格
table { width:250px;table-layout:fixed; }
table tr { height:1em; }
td { overflow:hidden;white-space:nowrap; }
Here's a Demo. Tested in Firefox 3.5.3 and IE 7
这是一个演示。在 Firefox 3.5.3 和 IE 7 中测试
回答by user645077
In general, if you are using white-space: nowrap;it is probably because you know which columns are going to contain content which wraps (or stretches the cell). For those columns, I generally wrap the cell's contents in a spanwith a specific classattribute and apply a specific width.
一般来说，如果您正在使用white-space: nowrap;它可能是因为您知道哪些列将包含包装（或拉伸单元格）的内容。对于这些列，我通常将单元格的内容包含在span具有特定class属性的a 中，并应用特定的width.
Example:
例子：
HTML:
HTML:
<td><span class="description">My really long description</span></td>
CSS:
CSS:
span.description {
display: inline-block;
overflow: hidden;
white-space: nowrap;
width: 150px;
}
回答by Troy Alford
In most modern browsers, you can now specify:
在大多数现代浏览器中，您现在可以指定：
<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>
Then if you apply the styles from the posts above, as follows:
然后，如果您应用上述帖子中的样式，如下所示：
table {
table-layout: fixed; /* This enforces the "col" widths. */
}
table th, table td {
overflow: hidden;
white-space: nowrap;
}
The result gives you nicely hidden overflow throughout the table. Works in latest Chrome, Safari, Firefox and IE. I haven't tested in IE prior to 9 - but my guess is that it will work back as far as 7, and you might even get lucky enough to see 5.5 or 6 support. ;)
结果为您在整个表中很好地隐藏了溢出。适用于最新的 Chrome、Safari、Firefox 和 IE。我没有在 9 之前在 IE 中进行过测试 - 但我猜它可以恢复到 7，你甚至可能幸运地看到 5.5 或 6 的支持。;)
回答by John Liungman
Here′s something I tried. Basically, I put the "flexible" content (the td which contains lines that are too long) in a div container that′s one line high, with hidden overflow. Then I let the text wrap into the invisible. You get breaks at wordbreaks though, not just a smooth cut-off.
这是我尝试过的东西。基本上，我将“灵活”内容（包含太长行的 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>
回答by Popara
Only downside (it seems), is that the table cell widths are identical. Any way to get around this? – Josh Stodola Oct 12 at 15:53
唯一的缺点（似乎）是表格单元格宽度相同。有什么办法可以解决这个问题？– 乔什·斯托多拉 10 月 12 日 15:53
Just define width of the table and width for each table cell
只需定义表格的宽度和每个表格单元格的宽度
something like
就像是
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;}
It works like a charm :o)
它就像一个魅力:o)
回答by Marco
If javascript is accepted as an answer, I made a jQuery plugin to address this issue (for more information about the issue see CSS: Truncate table cells, but fit as much as possible).
如果 javascript 被接受作为答案，我制作了一个 jQuery 插件来解决这个问题（有关该问题的更多信息，请参阅CSS: Truncate table cells, but fit as much as possible）。
To use the plugin just type
要使用插件，只需输入
$('selector').tableoverflow();
Plugin:https://github.com/marcogrcr/jquery-tableoverflow
插件：https : //github.com/marcogrcr/jquery-tableoverflow
Full example:http://jsfiddle.net/Cw7TD/3/embedded/result/
回答by Dan Alboteanu
wrap the table in a divwith class="container"
用 class="container"将表格包装在一个div 中
div.container {
width: 100%;
overflow-x: auto;
}
then
然后
#table_id tr td {
white-space:nowrap;
}
result
结果
