Html 100%高度的粘桌头“；窗格玻璃“；

背景： 我正在使用CSS创建一个类似web应用程序的体验，页面上的所有内容都始终可见，并且只有某些

窗格可以滚动。我现在需要将其扩展到表。我希望表头始终保持可见（有时是页脚），但表体应该只能滚动

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

小提琴：
我有一个JSFIDLE可以让我接近，它还演示了我用来创建固定和可滚动的
窗格的代码

要求：理想情况下，我希望保持我的
窗格
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>

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);} 

研究：
有人问过类似的问题，但从来没有得到很好的回应，最终选择了Javascript，但我想尝试找到一个CSS解决方案。或者至少是一个比他使用的更简单的Javascript解决方案（避免覆盖三个表）
好吧，第一个问题是为什么要使用表，但为了以防万一，请使用这个：

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

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

再说一遍，你真的应该使用div：更少、更容易的标记，没有像这样的问题。
经过大量的研究，找出了我的所有选项，我选择使用单独的表作为页眉、正文和页脚，我用div围绕每个表。然后我将该div设置为一个“窗格”。只要标题表和正文表中的列设置为相同的宽度，它们就会对齐

我必须做一些清理，其中一个导致需要保持垂直滚动条始终显示，然后在页眉和页脚表中添加一个边距，以便如果正文开始滚动或不滚动，页眉将始终对齐

应该是这样的：

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


标题
正文
正文
...
页脚

请参阅更新的JSFIDLE：

这仍然不是一个理想的解决方案，我可能会放弃这一点，转而使用Fabio的基于div的表的解决方案，尽管根据一些测试，我也可以看到这方面的潜在问题。现在，这就是我要坚持的。
我使用表格是因为我有需要插入的表格数据。如果你看小提琴的话，其余的窗格我都用div。谢谢，但这仍然不起作用。只需将
th
设为最小宽度，而tbody仍然很短啊，然后将tbody（和/或tr或td，如果需要）添加到声明中，以为它只是th。此外，表格数据根本不需要表格，您可以使用div并应用“display:table”（请参阅中的完整可能性）。我之所以提到这一点，是因为如果您需要使用响应式布局，它将拯救您的生命，相信Mestil不起作用。它只会转到最小宽度大小并停止。我甚至添加了所有的表元素到它和同样的东西。使最小宽度为100%也不起作用。请参阅更新的JSFIDLE：我将研究如何使用Div来处理表格数据，但如果可能的话，我仍然更喜欢使用表格，这使我的团队中的其他人更容易与不熟悉CSS的人合作。谢谢。你使用的代码与我给你的完全相同，请阅读以下内容：min width是桌子的最小宽度，因此如果你的桌子的宽度为600px，那么你将添加600px min width：我在你的小提琴上测试了它，工作起来像个魔术师。对不起，也许我的描述不清楚。我需要的表是100%的宽度，而不是一个设定的像素宽度。这意味着，如果在大型显示器上查看，则应拉伸表格，以填充可能使其达到1000px的宽度和高度，或在较小的显示器上达到600px。将最小宽度设置为600px将使其即使在较大屏幕上也保持该大小。