jquery - 如何使用 jQuery 制作流体宽度、流体高度、固定标题表？

Question

我一直在为 HTML/CSS 流体宽度、流体高度、固定标题表工作，但没有成功。我希望你能指点我一个 JavaScript 或 jQuery 解决方案。

标准：

1. 表格必须填满浏览器窗口的整个宽度（至少是容器）
2. 表格必须填满浏览器窗口中可用容器的整个高度
3. 如果所有行都没有足够的空间，tbody 必须滚动 y
4. 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> 

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

这是你想要的吗？ 工作示例

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