让 JSP 页面动态生成行数未知的 HTML 表格。
后端有属性，设置最大行数，例如:max_rows=15。
如何将 HTML 表格的行数限制为 max_rows 值？ 表格的其他部分应该可以通过垂直滚动访问，这意味着用户可以看到 15 行，如果向下滚动，将会看到表格的其他行。
可以通过计算行的平均高度和使用 div-wrapper 的 max-height 属性凭经验完成，但我认为这种方法不是很稳定。
所以需要依赖行数。 也许有针对这种情况的插件或者它是标准的 CSS 或 HTML 解决方案？
最佳答案
这可以通过标准的 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>
这已经在 Firefox、Chrome 和 IE 7 中进行了测试，但它应该适用于所有现代浏览器。请注意，每行内容的高度或每个单元格的填充量并不重要。如果您不想在表格上使用 border-collapse:collapse，则必须在 for 循环中添加代码以考虑单元格间距。
如果你有更粗的边框，然后用这个替换 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";
}
}
里面的try/catch处理了IE和其他浏览器的区别。 catch中的代码是针对IE的。
关于html - 设置 HTML 表格的最大显示行数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2117320/