title: Why does the width of a DOM element change with fixed positioning?
body: <p>I have an HTML Table for which I am trying to implement a Sticky fixed header. The table has over 100 rows and columns so that it scrolls on both the horizontal and vertical. </p>
  
  <p>For this, I need to set the position of the header element to 'Fixed', but doing so changes the width of the element, causing several <code>&lt;td&gt;</code> elements to be cut off on the right side of the <code>&lt;div&gt;</code> it is in.</p>
  
  <p><a href="https://i.stack.imgur.com/KTdxc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KTdxc.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/hb0dQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hb0dQ.png" alt="enter image description here"></a></p>
  
  <p>This is the table from the right side. With Position:Fixed applied (in the second view), the table header got truncated from the side and only scrolls up to a certain number of columns. There is no left or right margin, and no padding attributes. The table is inside a <code>&lt;div&gt;</code> which shares 80% of the screen, with 20% allocated to a second div with another table, as in:</p>
  
  <pre><code>#leftPanel {
      width: 20%;
      height: 90vh;
      float: left;
  }
  
  #tablePanel {
      width: 80%;
      height: 90vh;
      float:right;
  }
  </code></pre>
  
  <p>The table (inside the <code>#tablepanel</code> <code>&lt;div&gt;</code>) is set up with a standard table structure</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead class="header"&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;/tbody&gt;
  &lt;thead class="pseudoHeader"
  &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I use a Pseudo header, a clone of the main header, so that the widths of the columns are maintained after setting Position to fixed (another side-effect). The pseudo-header acts as its own scrollable element and reacts to scrolling on the <code>&lt;tbody&gt;</code> element. </p>
  
  <pre><code>$(".pseudoHeader").css({"top": 0, "position" : "fixed"});
  $(".pseudoHeader").css({"overflow-x":"scroll", "max-width":"100%"});
  </code></pre>
  
  <p>After setting these attributes in CSS, the width of the header is reduced and no longer shows all the columns. </p>
  
  <p>My question is, <strong>Why does <code>position: fixed</code> changed for the <code>&lt;thead&gt;</code> cause this behavior?</strong></p>