顶部滚动条不可见

Question

我正在HTML表格的顶部创建水平滚动条。 我一直在关注这个例子：

表格顶部和底部的水平滚动条

这是我的代码：（我没有提到的.wrapper2或.div2 ：

的HTML

<div class="wrapper1">
    <div class="scrollTop"></div>
</div>
<div class="tableData">
    <table>
        "..."              
    </table>
</div>

的CSS

.tableData {
    box-shadow: 10px 10px 5px #000;

    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    overflow: auto;
}

.wrapper1, .tableData {
    margin: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
}

.wrapper1 {
    height: 20px;
}

.scrollTop {
    width: 1000px;
    height: 20px;
}

JS

$(function(){
    $(".wrapper1").scroll(function(){
        $(".tableData").scrollLeft($(".wrapper1").scrollLeft());
    });
    $(".tableData").scroll(function(){
        $(".wrapper1").scrollLeft($(".tableData").scrollLeft());
    });
});

我的问题是我的顶部滚动条不可见。 它的容器不是实际的条本身（如您所见）：

所有的JS都可以正常运行，所以您认为它会成为CSS中的问题吗？ 我不太确定。

编辑

从上面的屏幕截图中，您可以看到容器底部的滚动条是可见的，因此可以与之交互。 但是，顶部滚动条不是。 它的容器是可见的，但实际的条形本身并不可见，因此无法与之交互且无法滚动。

Answer 1

将您的CSS更改为此：

.wrapper1, .tableData {
    width: 100%; 
    border: none 0px RED; 
    overflow-x: scroll; 
    overflow-y:hidden;
}

.tableData {
    box-shadow: 10px 10px 5px #000;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
}

.wrapper1 {
    height: 20px; 
}

.tableData{
     height: 200px; 
}
.scrollTop {
    width:1000px; 
    height: 20px; 
}

table {
    width:1000px; 
    height: 200px; 
    overflow: auto;
}

工作示例： http : //jsfiddle.net/ggChris/d8ayfnnp/

Answer 2

更改您的CSS

.tableData {
box-shadow: 10px 10px 5px #000;

-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;

}

演示链接http://jsfiddle.net/TBnqw/3144/