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>

Okay... But how do I get the second column to be after the fixed one and not behind? — Sébastien, Mar 03 '17 at 12:50
Possible duplicate of: http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body — Kallum Tanton, Mar 03 '17 at 12:52
Possible duplicate of [how do I create an HTML table with fixed/frozen left column and scrollable body?](http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body) — mayersdesign, Mar 03 '17 at 12:54
@Papple you've answered your own question with your comment. If you checked the this you could see that you're going to need to use CSS to accomplish this. The answer is in the link! — zik, Mar 03 '17 at 13:35

score 0 · Accepted Answer · answered Mar 14 '17 at 12:53

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;
  }
};

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

1 Answers1