Верхняя полоса прокрутки не отображается

Question

Я создаю горизонтальную полосу прокрутки в верхней части таблицы в HTML. я следовал этому примеру:

horizontal scrollbar on top and bottom of table

Это мой код: (я не имею .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? Я не совсем уверен.

EDIT

Из приведенного выше скриншота, вы можете увидеть, что бар нижней прокрутки в пределах его контейнер виден, так что можно взаимодействовать. Однако верхняя полоса прокрутки - нет. Контейнер виден, но сам фактический бар не может взаимодействовать и не может прокручиваться.

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; 

} 

Demo Ссылка http://jsfiddle.net/TBnqw/3144/