質問

を設定するにはどうすればよいですか？ <table> 100%の幅で <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を避けるために、私はこのような単純なテーブルと私は表示を変更しようとするときだけです。 table-layout , position また、CSSテーブルの多くのものは、pxで固定された幅でのみ100％の幅でうまく動作していません。

どうすればいいですか？

を作成するために <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 */
}

ウェブブラウザは thead と tbody という要素を 行グループ ( table-header-group と table-row-group ) をデフォルトで使用します。

これを変更すると、中の tr 要素がコンテナのスペース全体を埋め尽くすことはありません。

この問題を解決するために、まず tbody カラムに適用し、対応する値を thead カラムをJavaScriptで作成します。

自動幅のカラム

上記のロジックを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の場合) :

ワーキングデモ .

全幅テーブル、相対幅カラム

オリジナルポスターの必要性に応じて 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

という出力になる。

ワーキングデモ .

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

上記の2つの方法をWindows 7で主要なWebブラウザの新バージョン（IE10+を含む）経由でテストしたところ、うまくいきました。

しかし、それは はありません。 作業 ちゃんと IE9の場合 以下のようになります。

その理由は の中に テーブルレイアウト の場合、すべての要素は同じ構造特性に従わなければなりません。

を使用することで display: block; には <thead> と <tbody> 要素で、テーブルの構造を壊しています。

JavaScriptでレイアウトを再構築する

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

例えば、以下の例を見てください。

• jQuery .floatThead() プラグイン（フローティング/ロック/スティッキーテーブルヘッダープラグイン）です。
• jQuery スクロール可能なテーブル プラグインを使用します。( ソースコード githubにあります)
• jQuery .FixedHeaderTable()を使用する。 プラグイン( ソースコード githubにあります)
• データテーブル 縦スクロール の例です。

テーブルの入れ子

この方法では、2つのテーブルを入れ子にして、それを含むdivを使用します。最初の table を持つセルは1つだけで、そのセルは div の中に配置され、2つ目のテーブルがその div 要素を使用します。

を確認します。 縦スクロールのテーブル で CSSプレイ .

これは、ほとんどのウェブブラウザで動作します。また、上記のロジックはJavaScriptで動的に行うことも可能です。

スクロール時にヘッダーが固定されるテーブル

に垂直スクロールバーを追加するのが目的なので、そのようなことはありません。 <tbody> は、テーブルを表示する ヘッダー を各行の一番上に置くと 位置 その thead 要素を残す fixed を画面上部に表示するようにしました。

以下は 動作デモ によって行われたこの方法の ジュリアン .
ウェブブラウザへの対応も期待できる。

そして こちら a ピュアCSS による実装 ウィレム・ファン・ボックスタール .

Pure 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;
}

以下は オンラインデモ .

注 この方法は 失敗 各カラムの内容が改行される場合、すなわち 各セルの内容が十分に短いこと .

以下では、2つの簡単な例として ピュアCSSソリューション この質問に回答した時点で作成したものです。

以下は jsFiddleデモ v2 .

旧バージョンです。 jsFiddleデモ v1