Prevent width changes applying position:fixed

It was hard to exhaustively describe my question in the title so I'll try to be clearer in the description. I build a table using <div> and applying the CSS properties display: table etc. avoiding the semantic <table> approach purposely. All is working fine and now I'm trying to achieve a fixed header using position: fixed. The result is:

Obliviously the display: table-cell applied to the rest of the cell is provoking this not desiderated behavior. The cells are auto-resizing adapting to the new content and following just the min-width: 100px rule I applied in the CSS file.

Here a link to a working pen: https://codepen.io/l_core/pen/ZLQEjq

Is there a way to achieve a perfect align between the header and the "body" cells with a pure CSS approach? I could try to re-calculate width with JS but I'm sure that there is an elegant way to achieve this and I'd like to ask the experts here how to do this.

Below the code:

HTML

    <!-- Row Container -->
    <div class="row-container" id="row1">

      <!-- Header cell container -->
      <div class="cell cell-header" id="cell1">

        <!-- Cell content container -->
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell2">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell3">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell4">
        <div class="cell-content">
          <span>Cell</span>
        </div>
      </div>

      <div class="cell cell-header" id="cell5">
        <div class="cell-content">
          <span>Cell</span>
        </div>
    </div>

CSS

#row1 {
  position: fixed;
}

Please take a look to the pen I posted above for the full code. I'm not sure what it is a good idea to post it in his whole length.

The fixed element is out of the normal html flow. So, your table header is not part of the table anymore. So, they behave independently.

You could set a constant (or dynamically calculated using JS) width for all cells instead of min-width.