するために<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要素はコンテナのスペース全体を埋めません。
これを修正するには、JavaScriptを使用tbodyしてthead列の幅を計算し、対応する値を列に適用する必要があります。
列の自動幅
上記のロジックの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で）：
ワーキングデモ。
全幅テーブル、相対幅列
元のポスターが必要だったので、コンテナのtable100％まで拡大し、テーブルの各列に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
出力は次のようになります。
ワーキングデモ。
ブラウザのサポートと代替
私は主要なWebブラウザー（IE10 +を含む）の新しいバージョンを介してWindows 7で上記の2つの方法をテストし、それが機能しました。
しかし、それはしない 作業 正しく IE9上および下に。
これは、テーブルレイアウトでは、すべての要素が同じ構造プロパティに従う必要があるためです。
と要素を使用display: block;すること<thead>で<tbody>、テーブル構造を壊しました。
JavaScriptを介してレイアウトを再設計する
1つのアプローチは、（全体の）テーブルレイアウトを再設計することです。JavaScriptを使用してその場で新しいレイアウトを作成し、セルの幅/高さを動的に処理および調整します。
たとえば、次の例を見てください。
ネストテーブル
このアプローチでは、divを含む2つのネストされたテーブルを使用します。table1つ目は、1つのセルのみを持ちdiv、2つ目のテーブルはその中に配置されますdiv要素ます。
CSS Playで垂直スクロールテーブルを確認する。
これは、ほとんどのWebブラウザーで機能します。JavaScriptを介して上記のロジックを動的に実行することもできます。
スクロール時にヘッダーが固定されたテーブル
に垂直スクロールバーを追加する目的は、各行の上部に<tbody>テーブルヘッダーを表示することなので、thead要素を固定して配置できます。fixed代わりに画面の上部にます。
ここでワーキングデモによって行われるこのアプローチのジュリアン。
有望なWebブラウザーのサポートがあります。
そして、ここではWillem Van Bockstalによる純粋な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の値として幅の垂直スクロールバーの。
そのためには、calc()次のようにCSS3 関数を使用する必要があります。
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 Demo v2があります。
古いバージョン：jsFiddle Demo v1
