Question

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

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

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

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

因此需要依赖行数。也许有这种情况的插件或它的标准CSS或HTML解决方案？

Answer 1

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

Answer 2

将表放在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 * font-height。使用边框，填充和填充时，此高度不正确。但是可以为您的设计更准确地计算（以px为单位）。

Answer 3

修改：这实际上并没有解决提出的问题。我错过了用户需要能够滚动查看其余行的问题部分。哎呦。 所以，我认为实际上需要js。

这实际上可以在没有javascript的情况下完成。诀窍是使用nth-child(x)：

table {
    border-collapse: collapse;
}

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

需要边框折叠，因此边框不会超出隐藏的行。

这里是fiddle。

Answer 4

只有CSS和HTML无法做到这一点，你也需要javascript。获取前15行的高度，并将包装div的高度限制为该高度。设置溢出：在div上自动获取滚动条。

如果关闭javascript，请不要忘记将div上的默认高度设置为后备。

Answer 5

您可以使用slice功能：

$('table tbody > tr').slice(1,5).hide();

Answer 6

尝试一下：

table > tbody > tr:nth-child(n+15) {
    display:none;
}

设置HTML表的最大显示行数

6 个答案: