html - tbody 溢出隐藏不工作

Question

我试图让 y 的 tbody 溢出隐藏和 x 的自动溢出但是没有成功，我在这里尝试了一些技巧，

http://jsfiddle.net/wxdgf4pr/2

http://jsfiddle.net/wxdgf4pr

http://jsfiddle.net/wxdgf4pr/1

但都没有用，我想让 tbody 以这种方式滚动，thead 将留在原处。

HTML

<div id="fruitcratebody" style="height: 300px; width: 500px; background:red;">
    <div id="fruitcrateContainer">
        <table id="fruitcrateTable" class="tablesorter" style="display: table;">
            <thead>
                <tr>
                    <th class="header">Column1</th>
                    <th class="header">Column2</th>
                    <th class="header">Column3</th>
                    <th class="header">Column4</th>
                    <th class="header">Column5</th>
                    <th class="header">Column6</th>
                    <th class="header">Column7</th>
                </tr>
            </thead>
            <tbody id="fruitcrateTBody">
                <tr>
                    <td>0</td>
                    <td>Calculate1</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

CSS

tbody{
    position:relative;
    overflow:hidden;
    height:300px;
}

我想要这样的东西，但现在我在排列列宽时遇到了问题，

Answer 1

没有简单的方法来做到这一点，因为表格被格式化以显示所有内容，这意味着调整表格单元格的宽度和高度以显示内容，这也意味着表格高度和宽度将调整因此。任何指定的宽度和高度都倾向于被视为最小值。

为了得到你想要的效果，你需要使用如下所示的两个表。

您将标题放在一个表中，将数据放在第二个表中。两个表格的宽度相同，您需要确保所有表格单元格的宽度相同并使用 table-display: fixed。

围绕第二个表(用于数据)，包装一个启用滚动的 block 级 div。

注意:至少有一个 jQuery 插件可以处理粘性表头，例如，http://www.fixedheadertable.com

此外，如果没有一些额外的编程，表排序将无法在这种双表布局中工作。

有一个 jQuery 插件似乎同时具有排序和粘性 header :

http://mottie.github.io/tablesorter/docs/index.html

但您需要尝试一下。

.fruitcrateTable {
    border: 1px dotted blue;
    width: 520px;
}
.fruitcrateTable table {
    width: 500px;
    table-layout: fixed;
}
.fruitcrateTable table th, .fruitcrateTable table td {
    width: 15%;
    border: 1px dotted gray;
}
.fruitcrateTable .table-body-scroll {
    height: 300px;
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

<div class="fruitcrateTable">
<table class="header-table">
    <thead>
        <tr>
            <th class="header">Column1</th>
            <th class="header">Column2</th>
            <th class="header">Column3</th>
            <th class="header">Column4</th>
            <th class="header">Column5</th>
            <th class="header">Column6</th>
            <th class="header">Column7</th>
        </tr>
    </thead>
</table>
<div class="table-body-scroll">
        <table>
            <tbody>
                <tr>
                    <td>0</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                    <td>Calculate1</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
                <tr>
                    <td>0</td>
                    <td>Calculate2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>