☰

tbody 内で垂直スクロールする 100% 幅の HTML テーブル 質問する

tag-icon • tag-icon html css vertical-scrolling
tbody 内で垂直スクロールする 100% 幅の HTML テーブル 質問する

幅を 100%に設定し、高さを垂直スクロール<table>の内側のみに配置するにはどうすればよいですか?<tbody>

tbody 内の垂直スクロール

table {
    width: 100%;
    display:block;
}
thead {
    display: inline-block;
    width: 100%;
    height: 20px;
}
tbody {
    height: 200px;
    display: inline-block;
    width: 100%;
    overflow: auto;
}
  
<table>
  <thead>
    <tr>
    	<th>Head 1</th>
    	<th>Head 2</th>
    	<th>Head 3</th>
    	<th>Head 4</th>
    	<th>Head 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
    	<td>Content 1</td>
    	<td>Content 2</td>
    	<td>Content 3</td>
    	<td>Content 4</td>
    	<td>Content 5</td>
    </tr>
  </tbody>
</table>

追加の div を追加したくないのですが、必要なのはこのようなシンプルなテーブルだけです。CSS テーブルで表示などを変更しようとすると、table-layoutpxpositionで固定された幅の 100% 幅でのみうまく機能しません。

ベストアンサー1

要素をスクロール可能にするには<tbody>、ページ上での表示方法を変更する必要があります。つまり、display: block;ブロック レベル要素として表示するために を使用します。

displayのプロパティを変更するので、テーブルレイアウトが崩れないように、要素tbodyのプロパティも変更する必要があります。thead

つまり、次のようになります。

thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

Web ブラウザではthead、 およびtbody要素がデフォルトで行グループ(table-header-groupおよび) として表示されます。table-row-group

これを変更すると、内部のtr要素がコンテナーのスペース全体を埋めなくなります。

これを修正するには、tbody列の幅を計算し、対応する値をtheadJavaScript 経由で列に適用する必要があります。

列幅の自動調整

上記のロジックの jQuery バージョンは次のとおりです。

// Change the selector if needed
var $table = $('table'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
    return $(this).width();
}).get();

// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
    $(v).width(colWidth[i]);
});

出力は次のとおりです(Windows 7 Chrome 32 の場合) :

tbody 内の垂直スクロール

動作デモ。

全幅テーブル、相対幅列

元の投稿者が必要としていたように、コンテナーtableの 100% に拡張しwidth、テーブルの各列に相対値 (パーセンテージ)を使用できます。width

table {
    width: 100%; /* Optional */
}

tbody td, thead th {
    width: 20%;  /* Optional */
}

テーブルには（ある種の）流動的なレイアウトtheadがあるため、コンテナーのサイズが変更されたときに列の幅を調整する必要があります。

したがって、ウィンドウのサイズが変更されたら、列の幅を設定する必要があります。

// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
    /* Same as before */
}).resize(); // Trigger the resize handler once the script runs

出力は次のようになります。

tbody 内で垂直スクロール可能な Fluid Table

動作デモ。

ブラウザのサポートと代替

上記の 2 つの方法を、主要な Web ブラウザーの新しいバージョン (IE10 以降を含む) を使用して Windows 7 でテストしましたが、うまくいきました。

しかし、それはしない 仕事 きちんと IE9の場合以下も同様です。

それは、テーブルレイアウトすべての要素は同じ構造特性に従う必要があります。

および要素display: block;に を使用することで、テーブル構造が壊れています。<thead><tbody>

JavaScript でレイアウトを再設計する

1 つの方法は、テーブル レイアウト全体を再設計することです。JavaScript を使用して新しいレイアウトをその場で作成し、セルの幅や高さを動的に処理および/または調整します。

たとえば、次の例を見てください。

ネストテーブル

このアプローチでは、div を含む 2 つのネストされたテーブルを使用します。最初のテーブルtableには を含むセルが 1 つだけありdiv、2 番目のテーブルはそのdiv要素内に配置されます。

チェックしてください垂直スクロールテーブルCSS Playで。

これはほとんどの Web ブラウザで動作します。また、JavaScript を使用して上記のロジックを動的に実行することもできます。

スクロール時に固定ヘッダーのあるテーブル

垂直スクロール バーを追加する目的は、各行の上部に<tbody>テーブルヘッダーを表示することなので、代わりに要素を画面の上部に配置できます。theadfixed

がここにあります動作デモこのアプローチはジュリアン有望な Web ブラウザ サポートを備えています。

そしてここ1つの純粋なCSS実施者ウィレム・ファン・ボックスタル。

純粋なCSSソリューション

ここに古い回答があります。もちろん、新しいメソッドを追加し、CSS 宣言を改良しました。

固定幅のテーブル

この場合、 はtable固定値width (列の幅の合計と垂直スクロールバーの幅を含む)を持つ必要があります。

各列には特定の幅が必要であり、要素の最後の列には、他の列の幅+垂直スクロールバーの幅に等しい、より大きな幅が必要です。thead

したがって、CSS は次のようになります。

table {
    width: 716px; /* 140px * 5 column + 16px scrollbar width */
    border-spacing: 0;
}

tbody, thead tr { display: block; }

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 140px;
}

thead th:last-child {
    width: 156px; /* 140px + 16px scrollbar width */
}

出力は次のとおりです。

固定幅のテーブル

動作デモ。

幅100%のテーブル

このアプローチでは、tableの幅は で100%、 および ごとにth、プロパティtdの値はwidth未満である必要があります100% / number of cols。

また、垂直スクロールバーの幅の値として幅を減らす必要があります。thead

そのためにはCSS3を使う必要がありますcalc()関数は次のようになります。

table {
    width: 100%;
    border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
    /* fallback */
    width: 97%;
    /* minus scroll bar width */
    width: -webkit-calc(100% - 16px);
    width:    -moz-calc(100% - 16px);
    width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

tbody {
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

tbody td, thead th {
    width: 19%;  /* 19% is less than (100% / 5 cols) = 20% */
    float: left;
}

こちらはオンラインデモ。

注意:各列の内容が行を区切る場合、この方法は失敗します。つまり、各セルの内容は十分に短くする必要があります。

以下は、この質問に答えたときに私が作成した純粋な CSS ソリューションの簡単な例 2 つです。

こちらはjsFiddle デモv2。

旧バージョン:jsFiddle デモv1

おすすめ記事