logo标签列表

tbody overflow hidden不起作用

htmlcss
6

我试图让tbody在y轴方向上溢出隐藏，在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;
}

我希望能得到类似的效果，但是现在我遇到了列宽对齐的问题。

enter image description here

你的 HTML 表格标记似乎有误。 - Luís P. A.
5个回答
4
由于表格的格式化方式是显示所有内容，这意味着表格单元格的宽度和高度会根据内容进行调整，这也意味着表格的高度和宽度会相应地调整。任何指定的宽度和高度往往被视为最小值，因此没有简单的方法可以做到这一点。
要实现所需的效果，您需要使用下面所示的两个表格。将标题放在一个表格中，数据放在第二个表格中。两个表格具有相同的宽度，并且您需要确保所有表格单元格具有相同的宽度并使用“table-display: fixed”。
在第二个表格（用于数据）周围包装一个启用滚动的块级div。
注意：至少有一个jQuery插件处理粘性表头，例如，http://www.fixedheadertable.com 此外，在这种双表布局中，表格排序将无法工作，除非进行一些额外的编程。
有一个jQuery插件似乎同时具有排序和粘性表头：

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>

我有点明白了，但我不能在这里使用两个表格，因为我正在使用tablesort js库，我会将其选为答案，谢谢。 - Mathematics
@THE 我添加了一些关于一些可能有用的jQuery插件的注释，请查看更新的帖子。 - Marc Audet
谢谢，我正在使用这个 - http://mottie.github.io/tablesorter/docs/index.html - Mathematics
1

你可以在父元素上设置 overflow 属性。

#fruitcrateContainer {
    height: 100px;
    overflow-y: scroll;
    background:red;
}

尝试这个：http://jsfiddle.net/wxdgf4pr/12/

0
最终使用了这个CSS，使它工作了。
thead, tbody { display: block; }

tbody {
    height: 100px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

http://jsfiddle.net/wxdgf4pr/8/

@MarcAudet 你说得对，那正是我现在正在尝试实现的 :( - Mathematics
0

CSS

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

thead > tr, tbody{
    display:block;
}

演示

0

为包含表格的

应用溢出和固定高度

请参考JS FIDDLE

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接