title: Fix columns in horizontal scrolling
body: <p>I am currently trying to fix my first column in a table when the user scrolls in the X-axis.
  I am using this structure:</p>
  <pre><code>&lt;div class=&quot;table-wrapper&quot;&gt;
      &lt;table id=&quot;consumption-data&quot; class=&quot;data&quot;&gt;
          &lt;thead class=&quot;header&quot;&gt;
              &lt;tr&gt;
                  &lt;th&gt;Month&lt;/th&gt;
                  &lt;th&gt;Item 1&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody class=&quot;results&quot;&gt;
              &lt;tr&gt;
                  &lt;th&gt;Jan&lt;/th&gt;
                  &lt;td&gt;3163&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Feb&lt;/th&gt;
                  &lt;td&gt;3163.7&lt;/td&gt;         
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Mar&lt;/th&gt;
                  &lt;td&gt;3163.7&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Apr&lt;/th&gt;
                  &lt;td&gt;3163.7&lt;/td&gt;    
              &lt;/tr&gt;
              &lt;tr&gt;    
                  &lt;th&gt;May&lt;/th&gt;
                  &lt;td&gt;3163.7&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Jun&lt;/th&gt;
                  &lt;td&gt;3163.7&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;th&gt;...&lt;/th&gt;
                  &lt;td&gt;...&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The number of items will be picked by the user, i.e. it could be 90 items in the table. This will require scrolling in the X-axis. The question I have got though is:</p>
  <p>How do I fix the position of the <code>th</code> tags inside the <code>tbody</code> (and the <code>th:first-child</code> in the <code>thead</code>)?</p>
  <p>I have been looking at some other threads, however they do not really explain how I achieve the fixed columns which makes it hard for me to understand what the codes does and what I am supposed to do.</p>
  <p>I have also checked on solutions where people split up the header-column in another table. This wont be possible for me because I will export the data to other systems later on.</p>
  <p>My css:</p>
  <pre><code>.table-wrapper { 
      overflow-x:scroll;
      overflow-y:visible;
  }
  </code></pre>
  <p>This fixes the scroll, now comes the work with:</p>
  <pre><code>tbody th, 
  thead th:first-child {}
  </code></pre>
  <p>Anyone got any ideas?</p>
  <p>EDIT: Here is a jsFiddle: <a href="https://jsfiddle.net/DJqPf/5/" rel="nofollow noreferrer">https://jsfiddle.net/DJqPf/5/</a></p>