title: HTML Table with rowspan and fixed Column
body: <p>I have a table with some cells with rowspan in the first column.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table {
    border-collapse: collapse;
  }
  td,
  th {
    border: 1px solid black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th rowspan="2"&gt;Foo&lt;/th&gt;
        &lt;th colspan="5"&gt;Foo&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;19&lt;/th&gt;
        &lt;th&gt;20&lt;/th&gt;
        &lt;th&gt;21&lt;/th&gt;
        &lt;th&gt;22&lt;/th&gt;
        &lt;th&gt;23&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td rowspan="2"&gt;Foo&lt;/td&gt;
        &lt;td colspan="5"&gt;Foo&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td rowspan="2"&gt;Foo&lt;/td&gt;
        &lt;td colspan="5"&gt;Foo&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td rowspan="2"&gt;Foo&lt;/td&gt;
        &lt;td colspan="5"&gt;Foo&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
        &lt;td&gt;Bar&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It looks like this which is fine:</p>
  
  <p><img src="https://i.stack.imgur.com/VRxOW.png" alt="Table"></p>
  
  <p>I have removed many columns in this preview to make it more easy to read, but later there will be many more columns so I have added a <code>overflow-x:auto</code> style to the <code>div</code> around the table. That also works fine, but once you scroll to the right you are not able to view the first column any more, but I want it to stay visible all the time. When I tried solutions like <code>float:left</code> or <code>position:absolute</code> on the first column it is fixed like I want it, but it messes up with the rowspan columns.</p>
  
  <p><img src="https://i.stack.imgur.com/T3ZOD.png" alt="Table messed up"></p>
  
  <p>How can I get a fixed first column when I use the colspan attribute?
  If neccessary it can also use JavaScript, but I would prefer to stay with CSS.
  If it is only possible with JavaScript I need a library that does not change anything in the general design of the table and it would be nice if the fixed column would really be fixed and does not just move back to its original position after scrolling</p>
  
  <p>It is also important that it works on IE6, so solutions using <code>position: sticky</code> will not work</p>