行数が不明な動的に生成されたHTMLテーブルを含むJSPページがあります。
最大行数を設定するプロパティをバックエンドに設定します（例：max_rows = 15 ） 。
HTMLテーブルの行数をmax_rows値に制限するにはどうすればよいですか？テーブルの他の部分には、垂直スクロールでアクセスできる必要があります。つまり、ユーザーには15行が表示され、下にスクロールすると、テーブルの他の行が表示されます。
行の平均高さを計算し、div-wrapperのmax-heightプロパティを使用することで経験的に行うことができますが、このアプローチはあまり安定していないと思います。
したがって、行数に依存する必要があります。おそらく、そのような場合のプラグインがありますか、それとも標準のCSSまたはHTMLソリューションですか？
これは、標準の 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 ループにコードを追加してセルの間隔を考慮する必要があります。
境界線が太い場合は、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 と他のブラウザーの違いを処理します。キャッチ内のコードは 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 ブロックのコンテンツが高すぎる場合にブラウザーがスクロールバーを追加します。
高さを 15em に設定しました。これは、15 * font-height に相当します。ボーダー、パディングなどを使用する場合、この高さは正しくありません。ただし、設計ではより適切に (px 単位で) 計算できます。
CSS と HTML だけでこれを行う方法はありません。JavaScript も必要です。上位 15 行の高さを取得し、ラッピング div の高さをその高さに制限します。div に overflow: auto を設定して、スクロールバーを取得します。
JavaScript がオフになっている場合は、フォールバックとして div にデフォルトの高さを設定することを忘れないでください。
slice次の関数を使用できます。
$('table tbody > tr').slice(1,5).hide();