如何使用jQuery制作流体宽度,流体高度,固定头表？

我一直在为 HTML / CSS流体宽度,流体高度,固定头表工作,但没有成功.我希望你能指出我的 JavaScript或jQuery解决方案.

标准：

>表必须填满浏览器窗口的整个宽度(至少是容器)
> table必须在浏览器窗口中填充可用容器的整个高度
>如果所有行都没有足够的空间,tbody必须滚动y
> thead th和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>

解决方法

这还不完整,除了Chrome之外没有进行任何检查,但希望它能让你走上正轨.

基本上,方法是使容器位置：相对;并且th标记所有位置：绝对;.这需要相当多的额外代码才能正确定位,但这是一种不错的方法,可以使标题始终保持并且表格单元格滚动.

或者,您可以将标题与表格分开,但您仍需要设置宽度以使列对齐.真是一匹马.

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; }