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

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

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

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

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

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

Это можно сделать со стандартным HTML, CSS и немного javascript. Это может быть сделано для грамотно деgradleировать для клиентов с выключенным javascript. Под этим я подразумеваю, что они просто видят исходную таблицу, не измененную полосами прокрутки. Попробуйте что-то вроде этого:

      
blah blah blah blah blah blah blah blah
Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah

Это было протестировано в Firefox, Chrome и IE 7, но оно должно работать со всеми современными браузерами. Обратите внимание, что не имеет значения, насколько высока содержимое каждой строки или сколько заполняет каждую ячейку. Если вы не хотите использовать крах-коллапс: свернуть в вашей таблице, вам нужно будет добавить код в цикле 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.

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


Это можно сделать без javascript. Трюк использует nth-child(x) :

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

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

Вот скрипка .

Невозможно сделать это только с помощью CSS и HTML, вам также нужен javascript. Получите высоту верхних 15 строк и ограничьте высоту оберточного div на эту высоту. Установите переполнение: автоматически на div, чтобы получить ваши полосы прокрутки.

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

Поместите таблицу в блок div и используйте CSS, чтобы указать свойство высоты и переполнения div.

  
...table content...

Таким образом, div имеет фиксированную высоту, и браузер добавит полосу прокрутки, когда содержимое блока div слишком высока.

Я установил высоту 15м, что соответствует 15 * font-height. При использовании границ, прокладок и прочее эта высота неверна. Но он может быть рассчитан более правильно (в px) для вашего дизайна.

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

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