设置 HTML 表格的最大显示行数

JSP 页面包含动态生成的 HTML 表，行数未知。

在后端有属性，设置最大行数，例如： max_rows=15 。

如何将 HTML 表的行数限制为 max_rows 值？表格的其他部分应该可以通过垂直滚动访问，这意味着用户可以看到 15 行，如果向下滚动，将会看到表格的其他行。

可以通过计算行的平均高度和使用 div-wrapper 的 max-height 属性凭经验完成，但我认为这种方法不是很稳定。

所以需要依赖行数。也许有针对这种情况的插件或者它是标准的 CSS 或 HTML 解决方案？

原文由 sergionni 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 1.8k

这可以通过标准的 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 循环中添加代码以考虑 cellspacing。

如果您有较粗的边框，请将 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 的。

原文由 DaveS 发布，翻译遵循 CC BY-SA 2.5 许可协议

设置 HTML 表格的最大显示行数

你尚未登录，登录后可以

问一个鼠标滚动事件，这种是怎么实现的？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？

Vue为什么说textarea标签不支持插值表达式的？

为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?

单页应用网站缓存不是由于index.html文件被缓存导致的吗？

election嵌套了一个web项目通信为什么会中断?

Stack Overflow 翻译