设置 HTML 表格的最大显示行数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2117320/
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
Set maximum displayed rows count for HTML table
提问by sergionni
Have JSP page with dynamically generated HTML table with unknown number of rows.
具有动态生成的 HTML 表的 JSP 页面，行数未知。
Have property on backend, that sets maximum number of rows, e.g: max_rows=15.
在后端有属性，设置最大行数，例如：max_rows=15。
How to limit number of rows for HTML table to max_rowsvalue? Other part of table should be accessible by vertical scroll,it means that user see 15 rows and if to scroll down, that it will be seen other rows of table.
如何将 HTML 表的行数限制为max_rows值？表格的其他部分应该可以通过垂直滚动访问，这意味着用户看到 15 行，如果向下滚动，它将看到表格的其他行。
It can be done empirically by calculating average height of row and using max-height property for div-wrapper, but i think this approach is not very stable.
它可以通过计算行的平均高度并使用 div-wrapper 的 max-height 属性来凭经验完成，但我认为这种方法不是很稳定。
So it's needed to rely on row count. Perhaps there is plugin for such case or it's standard CSS or HTML solution?
所以需要依靠行数。也许有这种情况的插件或者它是标准的 CSS 或 HTML 解决方案？
采纳答案by DaveS
This can be done with standard HTML, CSS and a bit of javascript. It can be made to degrade gracefully for clients with javascript turned off too. By that I mean, they'll just see the original table, unmodified by scrollbars. Try something like this:
这可以通过标准的 HTML、CSS 和一些 javascript 来完成。对于关闭 javascript 的客户端，它也可以优雅地降级。我的意思是，他们只会看到未经滚动条修改的原始表格。尝试这样的事情：
<html>
<head>
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
.scrollingTable {
width: 30em;
overflow-y: auto;
}
</style>
<script type="text/javascript">
function makeTableScroll() {
// Constant retrieved from server-side via JSP
var maxRows = 4;
var table = document.getElementById('myTable');
var wrapper = table.parentNode;
var rowsInTable = table.rows.length;
var height = 0;
if (rowsInTable > maxRows) {
for (var i = 0; i < maxRows; i++) {
height += table.rows[i].clientHeight;
}
wrapper.style.height = height + "px";
}
}
</script>
</head>
<body onload="makeTableScroll();">
<div class="scrollingTable">
<table id="myTable">
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
<td>blah blah</td>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
<td>blah</td>
<td>blah</td>
</tr>
</table>
</div>
</body>
</html>
This was tested in Firefox, Chrome and IE 7, but it should work all modern browsers. Note that it doesn't matter how tall the content of each row is, or how much padding each cell has. If you don't want to use border-collapse:collapse on your table, then you'll have to add code in the for loop to take cellspacing into account.
这在 Firefox、Chrome 和 IE 7 中进行了测试，但它应该适用于所有现代浏览器。请注意，每行的内容有多高，或者每个单元格有多少填充都无关紧要。如果您不想在表格上使用 border-collapse:collapse，那么您必须在 for 循环中添加代码以考虑单元格间距。
If you have thicker borders, then replace the javascript function with this one:
如果你有较粗的边框，那么用这个替换 javascript 函数：
function makeTableScroll() {
// Constant retrieved from server-side via JSP
var maxRows = 4;
var table = document.getElementById('myTable');
var wrapper = table.parentNode;
var rowsInTable = table.rows.length;
try {
var border = getComputedStyle(table.rows[0].cells[0], '').getPropertyValue('border-top-width');
border = border.replace('px', '') * 1;
} catch (e) {
var border = table.rows[0].cells[0].currentStyle.borderWidth;
border = (border.replace('px', '') * 1) / 2;
}
var height = 0;
if (rowsInTable > maxRows) {
for (var i = 0; i < maxRows; i++) {
height += table.rows[i].clientHeight + border;
}
wrapper.style.height = height + "px";
}
}
The try/catch in there handles the differences between IE and other browsers. The code in the catch is for IE.
里面的 try/catch 处理了 IE 和其他浏览器之间的差异。catch 中的代码是针对 IE 的。
回答by rarrarrarrr
Edit: This doesn't actually solve the problem proposed. I missed the part in the question that the user needs to be able to scroll to see the rest of rows. Whoops. So, I suppose js is actually needed.
编辑：这实际上并没有解决提出的问题。我错过了问题中用户需要能够滚动以查看其余行的部分。哎呀。 所以，我想实际上需要js。
This can actually be done without javascript. The trick is using nth-child(x):
这实际上可以在没有 javascript 的情况下完成。诀窍是使用nth-child(x)：
table {
border-collapse: collapse;
}
tr:nth-child(n + 4) {
visibility: hidden;
}
The border-collapse is needed so the border doesn't extend beyond the hidden rows.
需要边框折叠以便边框不会超出隐藏的行。
Here's the fiddle.
这是小提琴。
回答by Veger
Put your table in a div block and use CSS to specify the height and overflow property of the div.
将您的表格放在一个 div 块中，并使用 CSS 指定 div 的高度和溢出属性。
<style type="text/css">
.table_outer { height: 15em; overflow: auto; }
</style>
<div class="table_outer">
<table>
...table content...
</table>
</div>
This way the div has a fixed height and the browser will add a scrollbar when the content of the div block is too height.
这样 div 就有了一个固定的高度，当 div 块的内容太高时，浏览器会添加一个滚动条。
I have set the height to 15em, which corresponds with 15 * font-height. When using borders, paddings and stuff this height is incorrect. But it can be calculated more properly (in px) for your design.
我已将高度设置为 15em，对应于 15 * font-height。使用边框、填充和填充时，此高度不正确。但它可以为您的设计更正确地计算（以像素为单位）。
回答by Emil Stenstr?m
There is no way to do this with only CSS and HTML, you need javascript too. Get the height of the top 15 rows, and limit the height of a wrapping div to that height. Set overflow: auto on the div to get your scrollbars.
仅使用 CSS 和 HTML 无法做到这一点，您也需要 javascript。获取前 15 行的高度，并将包装 div 的高度限制为该高度。在 div 上设置 overflow: auto 以获取滚动条。
Don't forget to set a default height on the div as a fallback if javascript is turned off.
如果 javascript 关闭，请不要忘记在 div 上设置默认高度作为后备。
