jQueryで流体幅、流体高さ、固定ヘッダーテーブルを作成するにはどうすればよいですか？

Question

私は、HTML/CSSの流体幅、流体高さ、固定ヘッダテーブルでうまくいっていませんでした。 JavaScriptまたはjQueryソリューションを私に教えてください。

基準：足りない場合

1. テーブルは、テーブルが
2. TBODY yをスクロールする必要があり、ブラウザのウィンドウ内で使用可能なコンテナの全体の高さを埋める必要があります
3. ブラウザウィンドウ（少なくともコンテナ）の幅全体を埋める必要がありますすべての行
4. thead要素番目とTBODY TD列の余地が

ピュアHTML/CSSを並べる必要がありますバストです。 jQueryやJavaScriptはどうですか？

はここでフィドルです：http://jsfiddle.net/JXWfC/6/

結局それはIE7 +、とChromeとFirefoxの最新のバージョンで動作する必要があります。

<div class="container"> 
    <div class="sidebar"> 
     nav here 
    </div> 
    <div class="content"> 
     <table> 
      <thead> 
       <tr><th>column 1</th><th>2</th><th>three</th><th>this is column four</th></tr> 
      </thead> 
      <tbody> 
       <tr><td>data</td><td>can</td><td>have</td><td>different widths: not all the same</td></tr> 
       <tr><td>table</td><td>-</td><td>should</td><td>fill 100% width and 100% height</td></tr> 
       <tr><td>and</td><td>-</td><td>should</td><td>not require all td's to be same width</td></tr> 
       <tr><td>but</td><td>-</td><td>percentage</td><td>% widths are just fine</td></tr> 
       <tr><td>and</td><td>if</td><td>there's</td><td>too many rows, it should scroll y (overflow-y: scroll)</td></tr> 
       <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr> 
       <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr> 
       <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr> 
       <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Answer 1

これは完全ではないとChrome以外のものにチェックされていないが、うまくいけば、それは正しい軌道に乗ってあなたを得るでしょう。

基本的には、コンテナをposition:relative;とthのタグをすべてposition:absolute;にすることです。これには、正確な位置決めのためにかなりの余分なコードが必要ですが、ヘッダーを常に維持してテーブルセルをスクロールさせるための適切な方法です。

また、ヘッダーをテーブルとは別のdivにすることもできますが、列が並ぶように幅を設定する必要があります。本当に馬の作品。

http://jsfiddle.net/daCrosby/JXWfC/9/

<div id="hold"> 
    <div class="header"> 
     <h4>title goes here</h4> 
    </div> 
    <div class="container"> 
     <div class="sidebar">sidebar<br />nav<br />goes<br />here</div> 
     <div class="content" > 
      <table> 
       <thead> 
        <tr> 
         <th class="col1">column 1</th> 
         <th class="col2">2</th> 
         <th class="col3">three</th> 
         <th class="col4">this is column four</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td class="col1">data</td> 
         <td class="col2">can</td> 
         <td class="col3">have</td> 
         <td class="col4">different widths: not all the same</td> 
        </tr> 
       [ ... ] 

CSS

body{ 
    background:#000; 
} 
div { 
    display:inline-block; 
    vertical-align:top; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 
#hold{ 
    display:block; 
    padding:40px 10px; 
    width:95%; 
    margin:auto; 
} 
.content table, 
.header, 
.container{ 
    width:100%; 
    max-height:100%; 
} 
.header { 
    background:darkgray; 
    color:white; 
    text-align:center; 
} 
.container { 
    background:lightgray; 
} 
.sidebar { 
    width:20%; 
    background:green; 
    color:white; 
    float:left; 
} 
.content { 
    width:80%; 
    position:relative; 
} 
h4 { 
    margin:0; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    background:red; 
    overflow-y:scroll; 
    height:300px; 
    display:block; 
} 
thead { 
    position:absolute; 
    top:1px; 
    left:0px; 
    right:0px; 
} 
tbody{ 
    padding:1.3em 0px 0px; 
    margin:0px; 
    display:block; 
} 
tr{ 
    width:100%; 
    display:block; 
    margin-top:-2px; 
} 
th { 
    background:#666; 
    color:#fff; 
    position:absolute; 
} 
td { 
    display:inline-block; 
    margin:0px; 
    padding:0px; 
    background:#ddd; 
} 
td.col2, 
td.col3, 
td.col4{ 
    margin-left:-4px; 
} 
.col1 { width:20%; } 
.col2 { width:10%; } 
.col3 { width:20%; } 
.col4 { width:50%; } 
th.col1 { left:0px; right:80%; } 
th.col2 { left:20%; right:70%; } 
th.col3 { left:30%; right:50%; } 
th.col4 { left:50%; right:0x; } 

Answer 2

したいこれは：

は、ここに私の基本的なページのいくつかのマークアップですか？ Working example

<div class="container" style="overflow:scroll;"> 
    <div class="sidebar">nav here</div> 
    <div class="content"> 
     <table> 
      <thead> 
       <tr> 
        <th width=25%>column 1</th> 
        <th width=25%>2</th> 
        <th width=25%>three</th> 
        <th width=25%>this is column four</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>data</td> 
        <td>can</td> 
        <td>have</td> 
        <td>different widths: not all the same</td> 
       </tr> 
       <tr> 
        <td>table</td> 
        <td>-</td> 
        <td>should</td> 
        <td>fill 100% width and 100% height</td> 
       </tr> 
       <tr> 
        <td>and</td> 
        <td>-</td> 
        <td>should</td> 
        <td>not require all td's to be same width</td> 
       </tr> 
       <tr> 
        <td>but</td> 
        <td>-</td> 
        <td>percentage</td> 
        <td>% widths are just fine</td> 
       </tr> 
       <tr> 
        <td>and</td> 
        <td>if</td> 
        <td>there's</td> 
        <td>too many rows, it should scroll y (overflow-y: scroll)</td> 
       </tr> 
       <tr> 
        <td>sample</td> 
        <td>1</td> 
        <td>row</td> 
        <td>Lorem ipsum dolor sit amit.</td> 
       </tr> 
       <tr> 
        <td>sample</td> 
        <td>1</td> 
        <td>row</td> 
        <td>Lorem ipsum dolor sit amit.</td> 
       </tr> 
       <tr> 
        <td>sample</td> 
        <td>1</td> 
        <td>row</td> 
        <td>Lorem ipsum dolor sit amit.</td> 
       </tr> 
       <tr> 
        <td>sample</td> 
        <td>1</td> 
        <td>row</td> 
        <td>Lorem ipsum dolor sit amit.</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>