title: Prevent width changes applying position:fixed
body: <p>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 <code>&lt;div&gt;</code> and applying the CSS properties <code>display: table</code> etc. avoiding the semantic <code>&lt;table&gt;</code> approach purposely.
  All is working fine and now I'm trying to achieve a fixed header using <code>position: fixed</code>. The result is:</p>
  
  <p><a href="https://i.stack.imgur.com/43iBS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/43iBS.png" alt="enter image description here"></a></p>
  
  <p>Obliviously the <code>display: table-cell</code> 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 <code>min-width: 100px</code> rule I applied in the CSS file.</p>
  
  <p>Here a link to a working pen: <a href="https://codepen.io/l_core/pen/ZLQEjq" rel="nofollow noreferrer">https://codepen.io/l_core/pen/ZLQEjq</a></p>
  
  <p>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.</p>
  
  <p>Below the code:</p>
  
  <p><strong>HTML</strong>
      </p>
  
  <pre><code>    &lt;!-- Row Container --&gt;
      &lt;div class="row-container" id="row1"&gt;
  
        &lt;!-- Header cell container --&gt;
        &lt;div class="cell cell-header" id="cell1"&gt;
  
          &lt;!-- Cell content container --&gt;
          &lt;div class="cell-content"&gt;
            &lt;span&gt;Cell&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="cell cell-header" id="cell2"&gt;
          &lt;div class="cell-content"&gt;
            &lt;span&gt;Cell&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="cell cell-header" id="cell3"&gt;
          &lt;div class="cell-content"&gt;
            &lt;span&gt;Cell&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="cell cell-header" id="cell4"&gt;
          &lt;div class="cell-content"&gt;
            &lt;span&gt;Cell&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="cell cell-header" id="cell5"&gt;
          &lt;div class="cell-content"&gt;
            &lt;span&gt;Cell&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>
      </p>
  
  <pre><code>#row1 {
    position: fixed;
  }
  </code></pre>
  
  <p>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.</p>