Javascript 顶部滚动条不可见

我正在用HTML在表格顶部创建一个水平滚动条。 我一直遵循这个例子：

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

HTML

JS

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

所有的JS都正常运行，所以认为这一定是CSS中的一个问题？我不完全确定

编辑

---

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

将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;
}

工作示例：

更改CSS

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

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

}

演示链接

---

仍然没有显示“是”的条形图。就像在我的屏幕截图中，它的容器是，但其中的条不是。这对我有用吗？不知道我是否误解了？

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

.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;
}

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

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

}