Second column in HTML table is behind the (fixed) first one

Question

I have a problem with my HTML table... I am trying to have a scrollbar when my table is too wide for the page. I'd like the first column to remain fixed while the user scrolls horizontally. It works but the second column of the table appears behind the first one! It looks like it comes from the style="position: fixed" property.

Here's the code:

<table id="coverageMatrix">
      <!-- Table Headings -->
      <tr>
        <th class="center" style="background: #ddd; position: fixed">ertertert</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
        <th class="center " style="background: #ddd;">azeazeaze</th>
      </tr>
      <tr name="scenarioRaws">
        <th style="position: fixed">qsdqsd</th>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
      </tr>
      <tr name="scenarioRaws">
        <th style="position: fixed">qsdqsd</th>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
      </tr>
      <tr name="scenarioRaws">
        <th style="position: fixed">qsdqsd</th>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
        <td>toto</td>
      </tr>
    </table>

Answer 1

Solved it using this codepen code:

.fixedTable {
  .table {
    background-color: white;
    width: auto;
    tr { 
      td, th {
        min-width: @cellWidth;
        width: @cellWidth;
        min-height: @cellHeight;
        height: @cellHeight;
        padding: @cellPadding;
      }
    }
  };
  &-header {
    width: (@cellWidth * @cellsWide) + (@cellPadding * 2);
    height: @cellHeight + (@cellPadding * 2);
    margin-left: @cellWidth + (@cellPadding * 2);
    overflow: hidden;
    border-bottom: 1px solid #CCC;
  };
  &-sidebar {
    width: @cellWidth + (@cellPadding * 2);
    height: @cellHeight * @cellsHigh + (@cellPadding * 2);
    float: left;
    overflow: hidden;
    border-right: 1px solid #CCC;
  };
  &-body {
    overflow: auto;
    width: (@cellWidth * @cellsWide) + (@cellPadding * 2);
    height: (@cellHeight * @cellsHigh) + (@cellPadding * 2);
    float: left;
  }
};