搜索
搜索

烦人的水平滚动条

Justin 发表于 Dev
45
贾斯汀

我正在尝试创建一个仅滚动表内容的页面，即表头不会随内容移动。

看起来不错，除了它具有烦人的水平滚动条（在所有现代浏览器中）。

代码在这里

div.title {
    position: absolute;
    top: 0px;
    height: 97px;
    width:100%;
}
div.tableHeader {
    position: absolute;
    top: 98px;
    height: 23px;
    overflow-y: scroll;
    width:100%;
}
div.tableBody {
    position: absolute;
    top: 128px;
    bottom: 0px;
    width:100%;
    overflow-x: auto;
    overflow-y: scroll;
}
table.fixedHeader {
    width: 100%;
    text-align: left;
}
table.fixedHeader thead {
    height: 21px;
    background-color: #BFC2CC;
}
table.fixedHeader tr:nth-child(even) {
    background-color: #ddd;
}
table.fixedHeader th:nth-child(1), table.fixedHeader td:nth-child(1) {
    width: 250px;
}
table.fixedHeader th:nth-child(2), table.fixedHeader td:nth-child(2) {
    width: 100px;
}
table.fixedHeader th:nth-child(3), table.fixedHeader th:nth-child(4), table.fixedHeader td:nth-child(3), table.fixedHeader td:nth-child(4) {
    width: 60px;
}
table.fixedHeader th:nth-child(5), table.fixedHeader th:nth-child(6), table.fixedHeader th:nth-child(7), table.fixedHeader td:nth-child(5), table.fixedHeader td:nth-child(6), table.fixedHeader td:nth-child(7) {
    width: 120px;
}
table.fixedHeader th:nth-child(8), table.fixedHeader td:nth-child(8) {
    width: 80px;
}
<body>
    <div class="title">
        	<h1> Demo how to set fixed table header</h1> 
    </div>
    <div class="tableHeader">
        <table class="fixedHeader">
            <thead>
                <tr>
                    <th>head1</th>
                    <th>head2</th>
                    <th>head3</th>
                    <th>head4</th>
                    <th>head5</th>
                    <th>head6</th>
                    <th>head7</th>
                    <th>head8</th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="tableBody">
        <table class="fixedHeader">
            <tr>
                <td>Text 1111</td>
                <td>Text Text</td>
                <td>3333</td>
                <td>4444</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text 2222</td>
                <td>Text Text</td>
                <td>3333</td>
                <td>4444</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text 3333</td>
                <td>Text Text</td>
                <td>3333</td>
                <td>4444</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text 4444</td>
                <td>Text Text</td>
                <td>3333</td>
                <td>4444</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text 5555</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text 6666</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text 7777</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text 8888</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text 9999</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text aaaa</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Text aaaa</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text bbbb</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Text cccc</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Text dddd</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
                <td>Even More Text Text</td>
            </tr>
            <tr>
                <td>Text eeee</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text ffff</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text gggg</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text hhhh</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
            <tr>
                <td>Text iiii</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
                <td>Text Text</td>
            </tr>
        </table>
    </div>
</body>

埃文

添加重置样式表或设置body { margin: 0; }以避免隐藏任何样式表overflow.

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

标题顶部的jqGrid水平滚动条

来自分类Dev

位置：绝对导致水平滚动条

来自分类Dev

网站缺少水平滚动条

来自分类Dev

水平滚动条，宽度为100％

来自分类Dev

水平滚动条未显示

来自分类Dev

水平滚动条未显示

来自分类Dev

jQuery水平滚动条消失

来自分类Dev

Microsoft Access水平滚动条

来自分类Dev

ListView不显示水平滚动条

来自分类Dev

水平滚动条？

来自分类Dev

DatagridView不显示水平滚动条

来自分类Dev

固定在水平滚动条的左侧

来自分类Dev

Google图表水平滚动条

来自分类Dev

挣扎与DIV的水平滚动条

来自分类Dev

卸下水平滚动条

来自分类Dev

水平响应式滚动条

来自分类Dev

如何隐藏水平滚动条

来自分类Dev

删除水平滚动条并使表格更宽

来自分类Dev

更改水平滚动条的宽度

来自分类Dev

CSS Grid导致水平滚动条

来自分类Dev

html顶部的水平滚动条

来自分类Dev

Div水平滚动条

来自分类Dev

固定水平滚动条

来自分类Dev

jQuery水平滚动条消失

来自分类Dev

NSText的水平滚动条

来自分类Dev

删除水平滚动条

来自分类Dev

反应水平滚动条

来自分类Dev

水平滚动条丢失

来自分类Dev

QScrollArea：垂直滚动条引起的水平滚动条

Related 相关文章

  1. 1

    标题顶部的jqGrid水平滚动条

  2. 2

    位置：绝对导致水平滚动条

  3. 3

    网站缺少水平滚动条

  4. 4

    水平滚动条，宽度为100％

  5. 5

    水平滚动条未显示

  6. 6

    水平滚动条未显示

  7. 7

    jQuery水平滚动条消失

  8. 8

    Microsoft Access水平滚动条

  9. 9

    ListView不显示水平滚动条

  10. 10

    水平滚动条？

  11. 11

    DatagridView不显示水平滚动条

  12. 12

    固定在水平滚动条的左侧

  13. 13

    Google图表水平滚动条

  14. 14

    挣扎与DIV的水平滚动条

  15. 15

    卸下水平滚动条

  16. 16

    水平响应式滚动条

  17. 17

    如何隐藏水平滚动条

  18. 18

    删除水平滚动条并使表格更宽

  19. 19

    更改水平滚动条的宽度

  20. 20

    CSS Grid导致水平滚动条

  21. 21

    html顶部的水平滚动条

  22. 22

    Div水平滚动条

  23. 23

    固定水平滚动条

  24. 24

    jQuery水平滚动条消失

  25. 25

    NSText的水平滚动条

  26. 26

    删除水平滚动条

  27. 27

    反应水平滚动条

  28. 28

    水平滚动条丢失

  29. 29

    QScrollArea：垂直滚动条引起的水平滚动条

热门标签

归档