如何使用jQuery製作流體寬度，流體高度，固定標題表？

Question

我一直在爲HTML/CSS流體寬度，流體高度，固定表頭工作而沒有成功。我希望你能指點我一個JavaScript或jQuery解決方案。

標準：

1. 表必須填寫的瀏覽器窗口（至少集裝箱）
2. 表必須填充可用容器的整個高度在瀏覽器窗口中
3. TBODY必須滾動Y的整個寬度上如果有沒有足夠的房間中的所有行
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;。這需要相當多的額外代碼才能正確定位，但是使標題始終保持不變並且表格單元格滾動是一個不錯的方法。

或者，您可以使標題與表格分開，但仍然需要設置寬度以便列排齊。一匹馬，真的。

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>