Horizontal scroll in table attached with position fixed

Question

A div with different tables that should all scroll horizontally while the first table must be attached to the top of the page fixed, so it is also visible when scrolling vertically.

Is there anyway to get this to work? Check out the fiddle: https://jsfiddle.net/1eu69ozm/8/

.table-container {
  max-width: 100%;
  overflow-x: auto;
  position: relative;
}

#firstTableWrapper {
  position: fixed;
}

<div class="table-container">
  <div id="firstTableWrapper">
    <table id="firstTable" class="tableClass">
      <tr class="trFirst">
        <th>
          <span>Make</span>
        </th>
        <td>Harley-Davidson</td>
        <td>BMW</td>
        <td>Honda</td>
        <td>Yamaha</td>
        <td>Ducati</td>
        <td>Kawasaki</td>
      </tr>
    </table>
  </div>
  <table class="tableClass">
    <tr>
      <th>
        <span>Model</span>
      </th>
      <td>Street Glide</td>
      <td>R 1250 GS Adventure</td>
      <td>CBR600RR</td>
      <td>YZF-R6</td>
      <td>Panigale V2</td>
      <td>Ninja ZX-10R</td>
    </tr>
    <tr>
      <th>
        <span>Color</span>
      </th>
      <td>Black</td>
      <td>White</td>
      <td>Red</td>
      <td>Blue</td>
      <td>Red</td>
      <td>Green</td>
    </tr>
  </table>
</div>

Answer 1

I figured it out moments after this post

Just add max width and overflow-x, think I tried before but without max-width..

     #firstTableWrapper {
      position: fixed;
      max-width: 100%;
      overflow-x: auto;
    }