具有 100% 高度“窗格”的粘性表格标题

Question

背景： 我正在使用 CSS 创建一个类似体验的 Web 应用程序，页面上的所有内容始终可见，并且只有某些 panes 是可滚动的。我现在需要将其扩展到表格。我希望表头始终保持可见（有时是页脚），但表体应该只能滚动。

到目前为止，我所做的是将“窗格”类应用于thead 和tfoot，然后使tbody 自动填充高度，然后使其可滚动。除了 thead、tbody 和 tfoot 不再是 100% 宽度之外，所有这些都有效。这种方法似乎让我最接近我想要的。

小提琴： 我有一个让我接近的 JSFiddle，它还演示了我用来创建固定和可滚动的 panes 的代码。 http://jsfiddle.net/va4HF/1/

要求：理想情况下，我希望保持我的pane css 不变，但在需要表格时进行调整。我也想只保留这个 CSS。

以下代码是我的概念验证代码，也包括窗格 CSS。

HTML：

<div class="column">
    <div class="pane top">Top</div>
    <div class="pane middle">
        <table>
            <thead class="pane table-head">
                <tr>
                    <th>Header</th>
                </tr>
            </thead>
            <tbody class="pane table-body fill">
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
            </tbody>
            <tfoot class="pane table-foot">
                <tr>
                    <th>Footer</th>
                </tr>
            </tfoot>
        </table>
    </div>
    <div class="pane bottom">Bottom</div>
</div>

CSS：

body, html {
    height:100%;
    margin:0;
    padding:0;
}
div {
    box-sizing:border-box;
    box-sizing:content-box\9; /* Fix for IE9 sizing */
    -moz-box-sizing:border-box; /* Fix for firefox sizing */
}
.column {
    position:absolute;
    width:100%;
    min-height:100%;
    height:auto;
    overflow:hidden;
}
.pane {
    position:absolute;
    width:100%;
    overflow:hidden;
}
.fill {
    height:auto;
    overflow:auto;
}
.top {
    background:pink;
    height: 20%;
    top:0;
}
.middle {
    background:red;
    top:20%;
    bottom:50px;
}
.table-head {
    height: 40px;
    top:0;
}
.table-body {
    top:40px;
    bottom:40px;
}
.table-foot {
    height: 40px;
    bottom:0;
}
.bottom {
    background:orange;
    height: 50px;
    bottom:0;
}
table thead tr, table tfoot tr {background:rgba(0,0,0,0.5);}
table tbody tr {background:rgba(0,0,0,0.3);}
table td, table th {padding:10px; color:#fff;}

/* Fix for Safari scrollbars (also styles Chrome scrollbars) */
    .fill::-webkit-scrollbar {-webkit-appearance: none;width: 10px;}
    .fill::-webkit-scrollbar-track {background-color: rgba(0,0,0, .3);border-radius: 0px;}
    .fill::-webkit-scrollbar-thumb {border-radius: 0px; background-color: rgba(255,255,255, .4);} 

研究： 其他人在Table that Fills 100% Parent Height with Fixed Header/Footer 提出了类似的问题，但没有得到很好的回应，最终使用了 Javascript，但我想尝试找到一个 CSS 解决方案。或者至少比他使用的更简单的 Javascript 解决方案（避免覆盖三个表）

Answer 1

经过大量研究以找出我的所有选项后，我选择为页眉、正文和页脚使用单独的表格，并用 div 围绕每个表格。然后我将该 div 设置为“窗格”。只要header表和body表中的列设置为等宽，就会排成一行。

我必须做一些清理工作，其中一个导致需要保持垂直滚动条始终显示，然后在页眉和页脚表中添加边距，以便如果正文开始滚动，页眉总会排队的。

应该是这样的：

    <div class="pane table-head">
        <table>
            <thead class="">
                <tr>
                    <th>Header</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="pane table-body fill">
        <table>
            <tbody>
                <tr><td>Text</td></tr>
                <tr><td>Text</td></tr>
                ...
            </tbody>
        </table>
    </div>
    <div class="pane table-foot">
        <table>
            <tfoot>
                <tr>
                    <th>Footer</th>
                </tr>
            </tfoot>
        </table>
    </div>

查看更新的 JSFiddle：http://jsfiddle.net/bluecaret/va4HF/5/

这仍然不是一个理想的解决方案，我可能最终会放弃它并使用 Fabio 的基于 div 的表的解决方案，尽管根据一些测试我也可以看到潜在的问题。现在这就是我要坚持的。

Answer 2

嗯，第一个问题是你为什么要使用表格，但以防万一：

table, th{width:100% !important; min-width:240px; }

其中 min-width 是表格的最小宽度

再一次，你真的应该使用 div：更少，更简单的标记，没有这样的问题