Question

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

标准：

表必须填满浏览器窗口的整个宽度（至少是容器）
表必须填写浏览器窗口中可用容器的整个高度
如果没有足够的空间容纳所有行，
必须滚动
thead th和tbody td列必须排队

纯HTML / CSS是一个半身像。如何使用jQuery或JavaScript？

最终，它需要适用于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>

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

2 个答案: