title: React table double scroll bar top and bottom
body: <p>I already have horizontal line at the bottom of the table, and my problem is, if there is too much data on the table, how can i add another scrollbar on the top of the header of the table?
  Thank you!</p>
  <pre><code>&lt;BTable 
      id=&quot;project-table&quot; 
      striped 
      bordered 
      hover 
      size=&quot;md&quot; 
      {...getTableProps()} 
      style={{
          overflowX: 'scroll !important',
          whiteSpace: 'nowrap',
      }}
      &gt;
      &lt;thead&gt;
      {headerGroups.map(headerGroup =&gt; (
      &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
          {headerGroup.headers.map(column =&gt; (
          &lt;th {...column.getHeaderProps()}&gt;
              {column.render('Header')}
          &lt;/th&gt;
          ))}
      &lt;/tr&gt;
      ))}
      &lt;/thead&gt;
      &lt;tbody&gt;
      {page.map((row, i) =&gt; {
      prepareRow(row)
      return (
          &lt;tr {...row.getRowProps()}&gt;
          {row.cells.map(cell =&gt; {
              return (
              &lt;td {...cell.getCellProps()}&gt;
                  {cell.render('Cell')}
              &lt;/td&gt;
              )
          })}
          &lt;/tr&gt;
      )
      })}
      &lt;/tbody&gt;
  &lt;/BTable&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/bWmaL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bWmaL.png" alt="enter image description here" /></a></p>