发表新帖
发表新帖

Set maximum displayed rows count for HTML table

后端 未结
关注
6 1679
情歌与酒
情歌与酒 2021-02-13 22:37

Have JSP page with dynamically generated HTML table with unknown number of rows.

Have property on backend, that sets maximum number of rows, e.g: max_rows=15

相关标签:
6条回答
  • 栀梦
    2021-02-13 23:17

    Put your table in a div block and use CSS to specify the height and overflow property of the 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.

    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.

    0 讨论(0)
  • 感动是毒
    2021-02-13 23:18

    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>
<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.

    If you have thicker borders, then replace the javascript function with this one:

    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.

    0 讨论(0)
  • 傲寒
    2021-02-13 23:23

    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.

    This can actually be done without javascript. The trick is using 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.

    0 讨论(0)
  • 没有蜡笔的小新
    2021-02-13 23:28

    You can use the slice function:

    $('table tbody > tr').slice(1,5).hide();
    0 讨论(0)
  • 死守一世寂寞
    2021-02-13 23:33

    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.

    Don't forget to set a default height on the div as a fallback if javascript is turned off.

    0 讨论(0)
  • 甜味超标
    2021-02-13 23:36

    Try this:

    table > tbody > tr:nth-child(n+15) {
    display:none;
}
    0 讨论(0)
 看不清?
提交回复
热议问题