logo标签列表

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

htmlhtml-tablemaxrow
12

我有一个包含未知行数的动态生成 HTML 表格的 JSP 页面。

后端有一个属性，可以设置最大行数，例如：max_rows=15。

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

可以通过计算行的平均高度并对 div 包装器使用 max-height 属性来实现经验性的解决方法，但我认为这种方法不是很稳定。

因此，需要依靠行数。 也许有适用于此情况的插件，或者是标准的 CSS 或 HTML 解决方案吗？

2
一些额外的信息会很有用，这是一个动态生成的页面吗？如果是，使用了什么框架和数据源？此外，您所说的限制是指不滚动吗？当行数超过限制时应该发生什么？ - Nick Craver
感谢您的指正，我已经修改了帖子使其更加清晰。 - sergionni
6个回答
10

可以使用标准的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的。

看起来很有前途，我会在测试这个解决方案后尽快给出反馈。 - sergionni
这有点晚了，但请检查我的答案。我找到了一种不需要JavaScript的方法！ - rarrarrarrr
1
你的解决方案并没有提供最初要求的滚动功能...它只是隐藏了额外的行，使它们无法访问。 - DaveS
@DaveS 您说得完全正确。我在问题中漏掉了那个。很抱歉用错误的答案重新唤起一个旧问题。感谢您指出这一点。我已经编辑了我的答案并加上了免责声明。 - rarrarrarrr
5
编辑: 这实际上并没有解决所提出的问题。我错过了问题中提到用户需要滚动才能看到其余行的部分。哎呀。所以，我想js实际上是必要的。

实际上可以在不使用javascript的情况下完成。技巧是使用nth-child(x)：

table {
    border-collapse: collapse;
}

tr:nth-child(n + 4) {
    visibility: hidden;
}

边框合并是必需的，这样边框就不会超出隐藏行的范围。
这是代码片段。
2
如果要循环表格以节省空间，可以使用display:none而不是visibility:hidden。 - user2338925
当新数据进来时，第四个子节点之后会发生什么？您能否使用传入的数据更新第一个子节点的数据？ - JayC
3
将您的表格放在一个div块中，并使用CSS指定div的高度和溢出属性。
<style type="text/css">
.table_outer { height: 15em; overflow: auto; }
</style>

<div class="table_outer">
  <table>
     ...table content...
  </table>
</div>

这样，div就有了固定的高度，当div块中的内容过高时，浏览器会添加滚动条。
我已将高度设置为15em，相当于15 * 字体高度。但是，如果使用边框、填充等东西，这个高度是不正确的。但是可以更准确地计算出适合您设计的高度（以像素为单位）。
哦，我没有看到你已经考虑过这个了。虽然我认为它是稳定的，并且被大多数/所有浏览器支持。 - Veger
是的，它很稳定，但我担心由于长文本而导致列高度变化，可能会引起一些不准确性。 - sergionni
1
确实。您可以使用JavaScript来查找前15行的高度，将这些值相加，修改div高度。但是对我来说，这听起来非常不稳定... - Veger
1

仅使用CSS和HTML无法实现此操作，您还需要JavaScript。获取前15行的高度，并将包装div的高度限制为该高度。在div上设置overflow：auto以获取滚动条。

如果关闭了JavaScript，请不要忘记在div上设置默认高度作为备用方案。

0

试试这个：

table > tbody > tr:nth-child(n+15) {
    display:none;
}
-1
你可以使用slice函数：
$('table tbody > tr').slice(1,5).hide();
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接