Tbody内に垂直スクロールを持つ、幅100％のHTMLテーブル

Question

<table>を100％幅に設定し、<tbody>垂直スクロールの内側だけに配置する方法を教えてください。

vertical scroll inside 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そしてpxの固定幅でのみ100％幅でうまく動かない。

Hashem Qolami · Accepted Answer

<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エレメントをrow-group（table-header-groupおよびtable-row-group）として表示します。

それを変更すると、内部のtr要素はコンテナのスペース全体を埋めません。

これを修正するには、tbody列の幅を計算し、対応する値をJavaScriptを介して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）：

vertical scroll inside tbody

WORKING DEMO 。

全幅テーブル、相対幅列

元のポスターが必要だったので、tableをそのコンテナーのwidthの100％に拡張し、テーブルの各列に相対（Percentage）widthを使用できました。

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

テーブルには（一種の）fluid layoutがあるため、コンテナのサイズを変更するときに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

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

Fluid Table with vertical scroll inside tbody

WORKING DEMO 。

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

主要なWebブラウザの新しいバージョン（IE10 +を含む）を介して、Windows 7で上記の2つの方法をテストし、機能しました。

ただし、それは does n't work properly IE9 以下.

テーブルレイアウトで、すべての要素が同じ構造プロパティに従う必要があるためです。

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

JavaScriptを使用してレイアウトを再設計する

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

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

jQuery 。floatThead（） プラグイン（フローティング/ロック/スティッキーテーブルヘッダープラグイン）
jQuery スクロール可能なテーブル プラグイン。（ソースコード githubで）
jQuery 。FixedHeaderTable（） プラグイン（ソースコード githubで）
DataTables 垂直スクロール の例。

ネストテーブル

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

垂直スクロールテーブル atCSS Playを確認します。

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

スクロールの固定ヘッダーを持つテーブル

<tbody>に垂直スクロールバーを追加する目的は、テーブルを表示することなので、各行の先頭にheaderがありますposition thead要素をfixedのままにすることができます代わりに画面の上部にあります。

Working Demo は、このアプローチの Julien によって実行されます。
有望なWebブラウザーのサポートがあります。

here a pure CSS Willem Van Bockstal による実装。

純粋なCSSソリューション

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

固定幅のテーブル

この場合、tableには固定のwidth（列の幅と垂直スクロールバーの幅の合計を含む）が必要です。

各columnには特定のwidthが必要であり、最終列のthead要素にはより大きなwidthが必要ですこれは、他のwidth+垂直スクロールバーのwidthと同じです。

したがって、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 */ }

出力は次のとおりです。

Table with Fixed Width

WORKING DEMO 。

100％幅のテーブル

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

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

これを行うには、次のように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; }

オンラインデモ です。

注：このアプローチは失敗各列のコンテンツが行を分割する場合、つまり各セルのコンテンツは十分に短くなければなりません。

以下に、この質問に答えたときに作成したpure CSS solutionの2つの簡単な例を示します。

jsFiddle Demo v2です。

古いバージョン： jsFiddle Demo v1

tsayen · Answer

次の解決策では、tableは親コンテナの100％を占めます。絶対サイズは必要ありません。それは純粋なCSSです、フレックスレイアウトが使用されます。

外観は次のとおりです。 enter image description here

考えられる欠点

垂直スクロールバーは、必要かどうかにかかわらず、常に表示されています。
テーブルレイアウトは固定されています - 列は内容の幅に応じてサイズ変更されません（あなたはまだあなたが明示的に望む任意の列幅を設定することができます）。
絶対サイズが1つあります - スクロールバーの幅です。これは私が確認できたブラウザでは約0.9emです。

HTML（短縮形）：

<div class="table-container"> <table> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> <th>head4</th> </tr> </thead> <tbody> <tr> <td>content1</td> <td>content2</td> <td>content3</td> <td>content4</td> </tr> <tr> <td>content1</td> <td>content2</td> <td>content3</td> <td>content4</td> </tr> ... </tbody> </table> </div>

明確にするためにいくつかの装飾を省略したCSS。

.table-container { height: 10em; } table { display: flex; flex-flow: column; height: 100%; width: 100%; } table thead { /* head takes the height it requires, and it's not scaled when table is resized */ flex: 0 0 auto; width: calc(100% - 0.9em); } table tbody { /* body takes all the remaining available space */ flex: 1 1 auto; display: block; overflow-y: scroll; } table tbody tr { width: 100%; } table thead, table tbody tr { display: table; table-layout: fixed; }

jsfiddleのフルコード

LESSでも同じコードなので、混在させることができます。

.table-scrollable() { @scrollbar-width: 0.9em; display: flex; flex-flow: column; thead, tbody tr { display: table; table-layout: fixed; } thead { flex: 0 0 auto; width: ~"calc(100% - @{scrollbar-width})"; } tbody { display: block; flex: 1 1 auto; overflow-y: scroll; tr { width: 100%; } } }

gavroche · Answer

私はtheadとtbodyにdisplay:blockを使っています。そのため、thead列の幅はtbody列の幅とは異なります。

table { margin:0 auto; border-collapse:collapse; } thead { background:#CCCCCC; display:block } tbody { height:10em;overflow-y:scroll; display:block }

これを修正するために私は小さなjQueryコードを使いますが、それはJavaScriptでしかできません。

var colNumber=3 //number of table columns for (var i=0; i<colNumber; i++) { var thWidth=$("#myTable").find("th:eq("+i+")").width(); var tdWidth=$("#myTable").find("td:eq("+i+")").width(); if (thWidth<tdWidth) $("#myTable").find("th:eq("+i+")").width(tdWidth); else $("#myTable").find("td:eq("+i+")").width(thWidth); }

これが私の作業用デモです： http://jsfiddle.net/gavroche/N7LEF/ /

IE 8では機能しません

var colNumber=3 //number of table columns for (var i=0; i<colNumber; i++) { var thWidth=$("#myTable").find("th:eq("+i+")").width(); var tdWidth=$("#myTable").find("td:eq("+i+")").width(); if (thWidth<tdWidth) $("#myTable").find("th:eq("+i+")").width(tdWidth); else $("#myTable").find("td:eq("+i+")").width(thWidth); }

 table {margin:0 auto; border-collapse:separate;} thead {background:#CCCCCC;display:block} tbody {height:10em;overflow-y:scroll;display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable" border="1"> <thead> <tr> <th>A really Very Long Header Text</th> <th>Normal Header</th> <th>Short</th> </tr> </thead> <tbody> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> <tr> <td> Text shorter than header </td> <td> Text is longer than header </td> <td> Exact </td> </tr> </tbody> </table>

Gauss · Answer

最近のブラウザでは、単純にcssを使うことができます。

th { position: sticky; top: 0; z-index: 2; }

Sushil Kumar · Answer

2つのテーブルを次々に作成し、2番目のテーブルを固定の高さのdivに配置し、overflowプロパティをautoに設定します。また、2番目のテーブルのadの内側にあるすべてのtdを空にします。

<div> <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> </table> </div> <div style="max-height:500px;overflow:auto;"> <table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></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>

Mikael Lepist&#246; · Answer

私はこれらの指示に従うことによってそれがようやく純粋なCSSでそれを得ました：

http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ /

最初のステップは<tbody>をdisplay：blockに設定してオーバーフローと高さを適用できるようにすることです。そこから、<thead>の行をposition：relativeとdisplay：ブロックに設定して、スクロール可能な<tbody>の上に配置する必要があります。

tbody, thead { display: block; overflow-y: auto; }

<thead>は相対的に配置されているため、各テーブルセルには明示的な幅が必要です

td:nth-child(1), th:nth-child(1) { width: 100px; } td:nth-child(2), th:nth-child(2) { width: 100px; } td:nth-child(3), th:nth-child(3) { width: 100px; }

しかし残念ながらそれだけでは不十分です。スクロールバーが存在するとき、ブラウザはそれのためにスペースを割り当てます、それ故、<tbody>は<thead>より利用可能なスペースが少なくなってしまいます。これがわずかにずれていることに注意してください...

私が思いついた唯一の回避策は、最後の列を除くすべての列に最小幅を設定することでした。

td:nth-child(1), th:nth-child(1) { min-width: 100px; } td:nth-child(2), th:nth-child(2) { min-width: 100px; } td:nth-child(3), th:nth-child(3) { width: 100px; }

以下のコード全体の例

CSS：

.fixed_headers { width: 750px; table-layout: fixed; border-collapse: collapse; } .fixed_headers th { text-decoration: underline; } .fixed_headers th, .fixed_headers td { padding: 5px; text-align: left; } .fixed_headers td:nth-child(1), .fixed_headers th:nth-child(1) { min-width: 200px; } .fixed_headers td:nth-child(2), .fixed_headers th:nth-child(2) { min-width: 200px; } .fixed_headers td:nth-child(3), .fixed_headers th:nth-child(3) { width: 350px; } .fixed_headers thead { background-color: #333333; color: #fdfdfd; } .fixed_headers thead tr { display: block; position: relative; } .fixed_headers tbody { display: block; overflow: auto; width: 100%; height: 300px; } .fixed_headers tbody tr:nth-child(even) { background-color: #dddddd; } .old_ie_wrapper { height: 300px; width: 750px; overflow-x: hidden; overflow-y: auto; } .old_ie_wrapper tbody { height: auto; }

HTML：

<!-- IE < 10 does not like giving a tbody a height. The workaround here applies the scrolling to a wrapped <div>. --> <!--[if lte IE 9]> <div class="old_ie_wrapper"> <!--<![endif]--> <table class="fixed_headers"> <thead> <tr> <th>Name</th> <th>Color</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Pear</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Grape</td> <td>Purple / Green</td> <td>These are purple and green.</td> </tr> <tr> <td>Orange</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Banana</td> <td>Yellow</td> <td>These are yellow.</td> </tr> <tr> <td>Kiwi</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Plum</td> <td>Purple</td> <td>These are Purple</td> </tr> <tr> <td>Watermelon</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Tomato</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Cherry</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Cantelope</td> <td>Orange</td> <td>These are orange inside.</td> </tr> <tr> <td>Honeydew</td> <td>Green</td> <td>These are green inside.</td> </tr> <tr> <td>Papaya</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Raspberry</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Blueberry</td> <td>Blue</td> <td>These are blue.</td> </tr> <tr> <td>Mango</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Passion Fruit</td> <td>Green</td> <td>These are green.</td> </tr> </tbody> </table> <!--[if lte IE 9]> </div> <!--<![endif]-->

編集：テーブル幅100％の代替解決策（上記は実際には固定幅のためであり、質問に答えていません）：

HTML：

<table> <thead> <tr> <th>Name</th> <th>Color</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>Apple</td> <td>Red</td> <td>These are red.</td> </tr> <tr> <td>Pear</td> <td>Green</td> <td>These are green.</td> </tr> <tr> <td>Grape</td> <td>Purple / Green</td> <td>These are purple and green.</td> </tr> <tr> <td>Orange</td> <td>Orange</td> <td>These are orange.</td> </tr> <tr> <td>Banana</td> <td>Yellow</td> <td>These are yellow.</td> </tr> <tr> <td>Kiwi</td> <td>Green</td> <td>These are green.</td> </tr> </tbody> </table>

CSS：

table { width: 100%; text-align: left; min-width: 610px; } tr { height: 30px; padding-top: 10px } tbody { height: 150px; overflow-y: auto; overflow-x: hidden; } th,td,tr,thead,tbody { display: block; } td,th { float: left; } td:nth-child(1), th:nth-child(1) { width: 20%; } td:nth-child(2), th:nth-child(2) { width: 20%; float: left; } td:nth-child(3), th:nth-child(3) { width: 59%; float: left; } /* some colors */ thead { background-color: #333333; color: #fdfdfd; } table tbody tr:nth-child(even) { background-color: #dddddd; }

デモ： http://codepen.io/anon/pen/bNJeLO

Emmanuel · Answer

'block' tbodyを使用して列を正しく表示するように強制するためのCss回避策

この解決方法では、jQueryによってthの幅を計算して設定する必要があります。

table.scroll tbody, table.scroll thead { display: block; } table.scroll tbody { overflow-y: auto; overflow-x: hidden; max-height: 300px; } table.scroll tr { display: flex; } table.scroll tr > td { flex-grow: 1; flex-basis: 0; }

そしてJquery/Javascript

var $table = $('#the_table_element'), $bodyCells = $table.find('tbody tr:first').children(), colWidth; $table.addClass('scroll'); // Adjust the width of thead cells when window resizes $(window).resize(function () { // 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]); }); }).resize(); // Trigger resize handler

Nandha Kumar R · Answer

以下の方法を試してみてください、 とても簡単で簡単に実装できます

以下はjsfiddleリンクです

http://jsfiddle.net/v2t2k8ke/2/ /

HTML：

<table border='1' id='tbl_cnt'> <thead><tr></tr></thead><tbody></tbody>

CSS：

 #tbl_cnt{ border-collapse: collapse; width: 100%;Word-break:break-all; } #tbl_cnt thead, #tbl_cnt tbody{ display: block; } #tbl_cnt thead tr{ background-color: #8C8787; text-align: center;width:100%;display:block; } #tbl_cnt tbody { height: 100px;overflow-y: auto;overflow-x: hidden; }

Jquery：

 var data = [ { "status":"moving","vehno":"tr544","loc":"bng","dri":"ttt" }, { "status":"stop","vehno":"tr54","loc":"che", "dri":"ttt" },{ "status":"idle","vehno":"yy5499999999999994","loc":"bng","dri":"ttt" },{ "status":"moving","vehno":"tr544","loc":"bng", "dri":"ttt" }, { "status":"stop","vehno":"tr54","loc":"che","dri":"ttt" },{ "status":"idle","vehno":"yy544","loc":"bng","dri":"ttt" } ]; var sth = ''; $.each(data[0], function (key, value) { sth += '<td>' + key + '</td>'; }); var stb = ''; $.each(data, function (key, value) { stb += '<tr>'; $.each(value, function (key, value) { stb += '<td>' + value + '</td>'; }); stb += '</tr>'; }); $('#tbl_cnt thead tr').append(sth); $('#tbl_cnt tbody').append(stb); setTimeout(function () { var col_cnt=0 $.each(data[0], function (key, value) {col_cnt++;}); $('#tbl_cnt thead tr').css('width', ($("#tbl_cnt tbody") [0].scrollWidth)+ 'px'); $('#tbl_cnt thead tr td,#tbl_cnt tbody tr td').css('width', ($('#tbl_cnt thead tr ').width()/Number(col_cnt)) + 'px');}, 100)

Roko C. Buljan · Answer

CSSのみ

Chrome、Firefox、Edge （およびその他のevergreenブラウザ）

単にth要素をposition: sticky; top: 0;にするだけです。

/* Fix table head */ .tableFixHead { overflow-y: auto; height: 100px; } .tableFixHead th { position: sticky; top: 0; } /* Just common table stuff. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; }

<div class="tableFixHead"> <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

IE11 に対応するためにわずかなJSを使用する上記の変種については、この回答を参照してください https://stackoverflow.com/a/47923622/383904

codegeek · Answer

tbody ＆ thead displayブロックを作成した後、 td、th に固定幅を追加すると、スクロールが完全に機能し、 slimscroll pluginを使用できます。バーは美しい。

<!DOCTYPE html> <html> <head> <title> Scrollable table </title> <style> body { font-family: sans-serif; font-size: 0.9em; } table { border-collapse: collapse; border-bottom: 1px solid #ddd; } thead { background-color: #333; color: #fff; } thead,tbody { display: block; } th,td { padding: 8px 10px; border: 1px solid #ddd; width: 117px; box-sizing: border-box; } tbody { height: 160px; overflow-y: scroll } </style> </head> <body> <table class="example-table"> <thead> <tr> <th> Header 1 </th> <th> Header 2 </th> <th> Header 3 </th> <th> Header 4 </th> </tr> </thead> <tbody> <tr> <td> Row 1- Col 1 </td> <td> Row 1- Col 2 </td> <td> Row 1- Col 3 </td> <td> Row 1- Col 4 </td> </tr> <tr> <td> Row 2- Col 1 </td> <td> Row 2- Col 2 </td> <td> Row 2- Col 3 </td> <td> Row 2- Col 4 </td> </tr> <tr> <td> Row 3- Col 1 </td> <td> Row 3- Col 2 </td> <td> Row 3- Col 3 </td> <td> Row 3- Col 4 </td> </tr> <tr> <td> Row 4- Col 1 </td> <td> Row 4- Col 2 </td> <td> Row 4- Col 3 </td> <td> Row 4- Col 4 </td> </tr> <tr> <td> Row 5- Col 1 </td> <td> Row 5- Col 2 </td> <td> Row 5- Col 3 </td> <td> Row 5- Col 4 </td> </tr> <tr> <td> Row 6- Col 1 </td> <td> Row 6- Col 2 </td> <td> Row 6- Col 3 </td> <td> Row 6- Col 4 </td> </tr> <tr> <td> Row 7- Col 1 </td> <td> Row 7- Col 2 </td> <td> Row 7- Col 3 </td> <td> Row 7- Col 4 </td> </tr> <tr> <td> Row 8- Col 1 </td> <td> Row 8- Col 2 </td> <td> Row 8- Col 3 </td> <td> Row 8- Col 4 </td> </tr> <tr> <td> Row 9- Col 1 </td> <td> Row 9- Col 2 </td> <td> Row 9- Col 3 </td> <td> Row 9- Col 4 </td> </tr> <tr> <td> Row 10- Col 1 </td> <td> Row 10- Col 2 </td> <td> Row 10- Col 3 </td> <td> Row 10- Col 4 </td> </tr> <tr> <td> Row 11- Col 1 </td> <td> Row 11- Col 2 </td> <td> Row 11- Col 3 </td> <td> Row 11- Col 4 </td> </tr> <tr> <td> Row 12- Col 1 </td> <td> Row 12- Col 2 </td> <td> Row 12- Col 3 </td> <td> Row 12- Col 4 </td> </tr> <tr> <td> Row 13- Col 1 </td> <td> Row 13- Col 2 </td> <td> Row 13- Col 3 </td> <td> Row 13- Col 4 </td> </tr> <tr> <td> Row 14- Col 1 </td> <td> Row 14- Col 2 </td> <td> Row 14- Col 3 </td> <td> Row 14- Col 4 </td> </tr> <tr> <td> Row 15- Col 1 </td> <td> Row 15- Col 2 </td> <td> Row 15- Col 3 </td> <td> Row 15- Col 4 </td> </tr> <tr> <td> Row 16- Col 1 </td> <td> Row 16- Col 2 </td> <td> Row 16- Col 3 </td> <td> Row 16- Col 4 </td> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-slimScroll/1.3.8/jquery.slimscroll.min.js"></script> <script> $('.example-table tbody').slimscroll({ height: '160px', alwaysVisible: true, color: '#333' }) </script> </body> </html>

Max Alexander Hanna · Answer

これは私がスクロール可能なtbodyを持つテーブルの上にsticky theadを作成するのに役立つコードです：

table ,tr td{ border:1px solid red } tbody { display:block; height:50px; overflow:auto; } thead, tbody tr { display:table; width:100%; table-layout:fixed;/* even columns width , fix width of table too*/ } thead { width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */ } table { width:400px; }

Julesezaar · Answer

「overflow：scroll」を使用するには、theadとtbodyに「display：block」を設定する必要があります。そして、それはそれらの間の列幅を台無しにします。ただし、その後、JavaScriptを使用してthead行を複製し、tbodyに非表示行として貼り付けて、正確な列幅を維持できます。

$('.myTable thead > tr').clone().appendTo('.myTable tbody').addClass('hidden-to-set-col-widths');

http://jsfiddle.net/Julesezaar/mup0c5hk/

<table class="myTable"> <thead> <tr> <td>Problem</td> <td>Solution</td> <td>blah</td> <td>derp</td> </tr> </thead> <tbody></tbody> </table> <p> Some text to here </p>

CSS：

table { background-color: #aaa; width: 100%; } thead, tbody { display: block; // Necessary to use overflow: scroll } tbody { background-color: #ddd; height: 150px; overflow-y: scroll; } tbody tr.hidden-to-set-col-widths, tbody tr.hidden-to-set-col-widths td { visibility: hidden; height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; } td { padding: 3px 10px; }

lechat · Answer

これを試してください jsfiddle 。これはjQueryを使用しており、Hashem Qolamiの回答から作成されています。最初に、通常のテーブルを作成してから、スクロール可能にします。

const makeScrollableTable = function (tableSelector, tbodyHeight) { let $table = $(tableSelector); let $bodyCells = $table.find('tbody tr:first').children(); let $headCells = $table.find('thead tr:first').children(); let headColWidth = 0; let bodyColWidth = 0; headColWidth = $headCells.map(function () { return $(this).outerWidth(); }).get(); bodyColWidth = $bodyCells.map(function () { return $(this).outerWidth(); }).get(); $table.find('thead tr').children().each(function (i, v) { $(v).css("width", headColWidth[i]+"px"); $(v).css("min-width", headColWidth[i]+"px"); $(v).css("max-width", headColWidth[i]+"px"); }); $table.find('tbody tr').children().each(function (i, v) { $(v).css("width", bodyColWidth[i]+"px"); $(v).css("min-width", bodyColWidth[i]+"px"); $(v).css("max-width", bodyColWidth[i]+"px"); }); $table.find('thead').css("display", "block"); $table.find('tbody').css("display", "block"); $table.find('tbody').css("height", tbodyHeight+"px"); $table.find('tbody').css("overflow-y", "auto"); $table.find('tbody').css("overflow-x", "hidden"); };