Установить максимальное количество отображаемых строк для таблицы HTML

Есть страница JSP с динамически генерируемой таблицей HTML с неизвестным количеством строк.



Имеют свойство на бэкэнде, которое задает максимальное количество строк, например: max_rows=15 .



Как ограничить количество строк для HTML-таблицы значениемmax_rows ?
Другая часть таблицы должна быть доступна вертикальной прокруткой, это означает, что пользователь видит 15 строк, а если прокрутить вниз, то будут видны другие строки таблицы.



Это можно сделать эмпирически, рассчитав среднюю высоту row и использование свойства max-height для div-оболочки, но я думаю, что этот подход не очень стабилен.



Поэтому необходимо полагаться на количество строк.
Возможно, есть плагин для такого случая или это стандартное CSS или HTML решение?

1082   5  

5 ответов:

Это можно сделать с помощью стандартных 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: сверните таблицу, затем вам нужно будет добавить код в цикл 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.

10  
2010-01-23 21:57:15

Edit: на самом деле это не решает предложенную проблему. Я пропустил ту часть вопроса, что пользователь должен иметь возможность прокручивать, чтобы увидеть остальные строки. Выкрикивает. Итак, я полагаю, что js действительно необходим.

На самом деле это можно сделать и без javascript. Фокус заключается в использовании nth-child(x): 

table {
    border-collapse: collapse;
}

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

Необходимо свернуть границу, чтобы граница не выходила за пределы скрытых строк.

Вот скрипка .

2  
2015-03-23 16:41:34

Поместите таблицу в 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*. При использовании бордюров, подкладок и прочего эта высота неверна. Но он может быть рассчитан более правильно (в px) для вашего дизайна.

1  
2010-01-22 15:57:06

Нет способа сделать это только с CSS и HTML, вам также нужен javascript. Получить высота 15 рядов, и ограничивать высоту оберточный див на эту высоту. Установите overflow: auto на div, чтобы получить полосы прокрутки.

Не забудьте установить высоту по умолчанию для div в качестве запасного варианта, если javascript выключен.

1  
2010-01-22 18:35:59

Вы можете использовать slice функция: 

$('table tbody > tr').slice(1,5).hide();
0  
2017-10-12 02:21:24

Comments

    Ничего не найдено.
Click here to cancel reply.