Набор максимальные отображенные строки значит HTML-таблицу
Имейте страницу JSP с динамично сгенерированной HTML-таблицей с неизвестным количеством строк.
Имейте свойство на бэкенде, который определяет максимальный номер строк, например: max_rows=15.
Как ограничить количество строк для HTML-таблицы к значению max_rows? Другая часть таблицы должна быть доступной вертикальной прокруткой, это означает, что пользователь видит 15 строк и если прокрутить вниз, что она будет замечена другие строки таблицы.
Это может быть сделано опытным путем путем вычисления средней высоты строки и использования свойства макс. высоты для обертки отделения, но я думаю, что этот подход не очень стабилен.
Таким образом, необходимо полагаться на количество строки. Возможно, существует плагин для такого случая, или это - стандартный CSS или решение HTML?
3 ответа
Это может быть сделано со стандартным 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, но он должен работать все современные браузеры. Обратите внимание, что не имеет значения, насколько высока содержится содержимое каждой строки, или насколько прокладывается каждая клетка. Если вы не хотите использовать пограничный коллапс: рухнуть на своем столе, то вам придется добавить код в цикле для подключения к совокупности.
Если у вас есть более толстые границы, затем замените функцию 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";
}
}
Там. Попробуйте / поймать там, обрабатывает различия между IE и другими браузерами. Код в улова для IE.
Поместите свой стол в блоке 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 слишком высота.
Я установил высоту до 15ЕМ, что соответствует 15 * высоте шрифта. При использовании границ, прокладки и вещества этой высоты неверны. Но это может быть рассчитано более правильно (в PX) для вашего дизайна.
Нет возможности сделать это только с CSS и HTML, вам тоже нужен JavaScript. Получите высоту верхних 15 рядов и ограничьте высоту обертывания DIV к этой высоте. Установите переполнение: Авто на Div, чтобы получить прокрутки.
Не забудьте установить высоту по умолчанию на DIV в качестве отблески, если JavaScript выключен.