html - 具有 100% 高度的粘性表头 "panes"

Question

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

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

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

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

以下代码是我的概念验证代码，也包含 Pane 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 设置为“ Pane ”。只要将表头表和表体表中的列设置为相同的宽度，它们就会排成一行。

我必须做一些清理工作，其中之一是需要始终显示垂直滚动条，然后为页眉和页脚表格添加边距，这样无论正文是否开始滚动，页眉将始终排队。

应该是这样的:

    <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 的表格的解决方案，尽管根据一些测试我也可以看到它的潜在问题。现在，这就是我要坚持的。