web-dev-qa-db-ja.com

HTMLテーブルの最大表示行数を設定する

行数が不明な動的に生成されたHTMLテーブルを含むJSPページがあります。

最大行数を設定するプロパティをバックエンドに設定します（例：max_rows = 15）。

HTMLテーブルの行数をmax_rows値に制限する方法は？テーブルの他の部分は垂直スクロールでアクセスできる必要があります。つまり、ユーザーは15行を表示し、下にスクロールすると、テーブルの他の行が表示されます。

行の平均の高さを計算し、div-wrapperにmax-heightプロパティを使用することで、経験的に行うことができますが、このアプローチはあまり安定していないと思います。

したがって、行数に依存する必要があります。おそらくそのような場合のプラグインがあるのでしょうか、それとも標準のCSSまたはHTMLソリューションなのでしょうか？

htmlhtml-tablemaxrow
12
sergionni

これは、標準の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 and 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と他のブラウザの違いを処理します。catchのコードはIE用です。

10
DaveS

Edit：これは実際に提案された問題を解決しません。ユーザーが残りの行を表示するにはスクロールできる必要があるという質問の一部を逃しました。おっと。 だから、私はjsが実際に必要だと思います。

これは実際にはJavaScriptなしで実行できます。トリックはnth-child(x)を使用することです：

table {
    border-collapse: collapse;
}

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

境界線が非表示の行を超えないように、border-collapseが必要です。

これが fiddle です。

3
rarrarrarrr

テーブルを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で）計算できます。

2
Veger

CSSとHTMLだけでこれを行う方法はありません。JavaScriptも必要です。上位15行の高さを取得し、ラッピングdivの高さをその高さに制限します。 divでオーバーフローを設定して、スクロールバーを取得します。

JavaScriptがオフになっている場合、フォールバックとしてdivにデフォルトの高さを設定することを忘れないでください。

1
Emil Stenström

slice 関数を使用できます。

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