烦人的水平滚动条

Question

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

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

代码在这里

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>

Answer 1

尝试添加 CSS overflow-x: hidden;到 table.

Answer 2

实际上你需要的是将 overflow-y: hidden; 添加到你的 .tableHeader div

这是更新后的 fiddle http://jsfiddle.net/gcfurtqs/4/

Answer 3

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

烦人的水平滚动条

Annoying horizontal scrollbar

css

scroll

scrollbar