How to add a second Horizontal Scroll Bar

I’m working on a HTML table in a bootstrap panel header. The table is quite wide so I need to add a second horizontal scroll bar.

I currently have one at the bottom of the page but I need to add one to the top of the page as well.

I have tried adding an empty div with a scrollbar as follows:

div.scroll {
      width:1000px;
      overflow-X:scroll;
      height:35px;
}

<div class="scroll"></div>

https://jsfiddle.net/meb84Lab/

This shows the scroll bar, but it is disabled (it doesn’t have the highlighted bar to move along, just the light grey background bit).

How can I add a scrollbar to the top of the table?