如何使用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>