固定ヘッダーとフッターと固定幅のないスクロール可能な本体を持つHTMLテーブル

Question

theadとtfootとスクロール可能なtbodyのテーブルを作成したい！

彼らはデモでマークアップを変更することにより、ブレーク私は、唯一のCSSやCSS + JavaScriptの両方を、いくつかのアプローチを試みたが、彼らはすべての弱いと信頼できないと私はできる簡単。私が欲しいもの

がテーブルよう動作するようにテーブルを持っている方法ですが、これは、ブラウザが自動的にコンテンツ（ページのロードの両方でウィンドウサイズ変更の場合と）に基づいて列を調整することを意味し、

1. 列のヘッダー（thead > tr > th）の含有量は、カラムの本体（tbody > tr > td）の含有量よりも大きいと列のフッタの内容よりも大きい場合（tfoot > tr > td）カラムのサイズを変更する必要があります。これらのシナリオでその列のヘッダーのサイズに基づいて

2. カラムは、カラムのサイズに基づいてリサイズする必要があり、列のボディ（tbody > tr > td）の含有量は、列のヘッダ（thead > tr > th）の含有量よりも大きいと列のフッタ（tfoot > tr > td）の含有量よりも大きい場合本体

3. 列のフッタ（tfoot > tr > td）の含有量は、カラムは、サイズに基づいて、サイズを変更する必要があり、列のヘッダ（thead > tr > th）の含有量よりも大きいと列のボディの内容よりも大きい（tbody > tr > td）である場合列のフッター

の

table以下明確にすべきシナリオ：、おそらくCSSだけでなく、JavaScriptがOK（バニラとクリーンJavaScriptは、私はさまざまなシナリオのために働くだろうクリーン（可能な限り）と信頼性の高いソリューションをしたい

<table> 
    <thead> 
    <tr> 
     <th>Header one *leads the width* (case 1)</th> 
     <th>Header two</th> 
     <th>Header three</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Column one</td> 
     <td>Column two *leads the width* (case 2)</td> 
     <td>Column three</td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <td>Footer one</td> 
     <td>Footer two</td> 
     <td>Footer three *leads the width* (case 3)</td> 
    </tr> 
    </tfoot> 
</table> 

です、jQueryプラグインではありません）。 古いブラウザのサポートは気にしません（古いブラウザでは正常に機能しなくなる可能性がありますが、それはオプションです）... div sの代わりにテーブルを使用することもできます最終的な解決策が期待どおりに機能するかどうかを判断するノードが必要です.2016年には、現代のブラウザとCSSがこのように可能ですか？

EDIT：

体が垂直方向にスクロールする必要があり、テーブルが列

の任意の数を有することができる

UPDATE：私はこの解決策を考え出した

：https://codepen.io/daveoncode/pen/LNomBEは が、私は」まだ100％満足していない。主な問題は、ヘッダーとフッターのセルに異なる背景を設定できないことです。

UPDATE 2：

それが機能するようになりました！

Answer 1

私は最終的に実用的なソリューションを実装！

関連するCSSは以下の通りです：

.wrapper { 
    width: 90%; 
    position: relative; 
    border: 1px solid #000; 
    background: #efefef; 
    overflow: hidden; 
    border-radius: 7px; 
} 

.container { 
    overflow-y: auto; 
    height: 200px; 
    border-top: 41px solid transparent; 
    border-bottom: 41px solid transparent; 
} 

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

td + td { 
    border-left: 1px solid #fff; 
} 

td, th { 
    border-bottom: 1px solid #fff; 
    background: #efefef; 
    padding: 10px; 
} 

thead tr th, 
tfoot tr td { 
    height: 0; 
    line-height: 0; 
    margin: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    color: transparent; 
    border: none; 
    white-space: nowrap; 
} 

thead tr th div, 
tfoot tr td div { 
    position: absolute; 
    color: #fff; 
    height: 20px; 
    padding: 10px; 
    margin-left: -10px; 
    line-height: normal; 
    width: 100%; 
    z-index: 2; 
    text-align: left; 
    font-weight: bold; 
} 

thead tr th div { 
    border-left: 1px solid #000; 
    border-bottom: 1px solid #000; 
} 

tfoot tr td div { 
    border-top: 1px solid #000; 
} 

tfoot tr td div.c1, 
thead tr th div.c1 { 
    background: violet; 
} 

tfoot tr td div.c2, 
thead tr th div.c2 { 
    background: green; 
} 

tfoot tr td div.c3, 
thead tr th div.c3 { 
    background: yellow; 
} 

thead tr th div { 
    top: 0; 
} 

tfoot tr td div { 
    bottom: 0; 
} 

thead tr th:first-child div, 
tfoot tr td:first-child div { 
    border-left: none; 
} 

そして、これは、マークアップです：

<div class="wrapper"> 
    <div class="container"> 
    <table> 
     <thead> 
     <tr> 
      <th> 
      Header one *leads the width* (case 1) 
      <div class="c1"> 
       Header one *leads the width* (case 1) 
      </div> 
      </th> 
      <th> 
      Header two 
      <div class="c2"> 
       Header two 
      </div> 
      </th> 
      <th> 
      Header three 
      <div class="c3"> 
       Header three 
      </div> 
      </th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three [first]</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three</td> 
     </tr> 
     <tr> 
      <td>Column one</td> 
      <td>Column two *leads the width* (case 2)</td> 
      <td>Column three [LATEST]</td> 
     </tr> 
     </tbody> 
     <tfoot> 
     <tr> 
      <td> 
      Footer one 
      <div class="c1"> 
       Footer one 
      </div> 
      </td> 
      <td> 
      Footer two 
      <div class="c2">Footer two</div> 
      </td> 
      <td> 
      Footer three *leads the width* (case 3) 
      <div class="c3">Footer three *leads the width* (case 3)</div> 
      </td> 
     </tr> 
     </tfoot> 
    </table> 
    </div> 
</div> 

それはクロム、Firefoxの、サファリとIE11で動作します（私はそれがどのように動作するか分かりません古いブラウザでは）。 codepenでそれを参照してください：https://codepen.io/daveoncode/pen/LNomBE

Answer 2

あなたのテーブル（div）にラッパーを使用することによって、あなたが望むものを達成し、theadからtrを作ることができるとtfootposition:absolute

body { 
 
    margin: 0 
 
} 
 
div { 
 
    max-height: 500px; 
 
    overflow-y: auto; 
 
} 
 
table { 
 
    width: 100% 
 
} 
 
thead tr, 
 
tfoot tr { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 15px; /* to not cover the scrollbar*/ 
 
    background: red 
 
} 
 
thead tr { 
 
    top: 0 
 
} 
 
tfoot tr { 
 
    top: 500px /* same value has max-height from div */ 
 
} 
 
th, 
 
td { 
 
    width: 33%; 
 
    font-size: 12px; 
 
    text-align: center 
 
} 
 
/*give some space between thead and tfoot*/ 
 

 
tbody tr:first-of-type td { 
 
    padding-top: 35px; 
 
} 
 
tbody tr:last-of-type td { 
 
    padding-bottom: 35px; 
 
}

<div> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Header one *leads the width* (case 1)</th> 
 
     <th>Header two</th> 
 
     <th>Header three</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Column one</td> 
 
     <td>Column two *leads the width* (case 2)</td> 
 
     <td>Column three</td> 
 
     </tr> 
 
    </tbody> 
 
    <tfoot> 
 
     <tr> 
 
     <td>Footer one</td> 
 
     <td>Footer two</td> 
 
     <td>Footer three *leads the width* (case 3)</td> 
 
     </tr> 
 
    </tfoot> 
 
    </table> 
 
</div>

Answer 3

$.ajax({ 
      url: "upload.php", 
      type: "POST", 
      data: fd, 
      processData: false, // tell jQuery not to process the data 
      contentType: false // tell jQuery not to set contentType 
     }).done(function(data) { 
      console.log("PHP Output:"); 
      console.log(data); 
     }); 
     return false; 
    }