Question

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

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

小提琴： 我有一个让我接近的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设计为＆＃34; pane＆＃34;。只要标题表和正文表中的列设置为相同的宽度，它们就会排成一行。

我必须做一些清理工作，其中一个需要保持垂直滚动条始终显示，然后在页眉和页脚表中添加一个边距，这样如果主体开始滚动或不滚动，标题总会排队。

这将是这样的：

    <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：更少，更容易的标记，没有像这样的问题

具有100％高度“窗格”的粘桌头

2 个答案: