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

基本上,方法是使容器位置：相对;并且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; }