带有rowspan和固定列的HTML表

Question

我在第一列中有一些带有rowspan的单元格的表。

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
}

<table>
  <thead>
    <tr>
      <th rowspan="2">Foo</th>
      <th colspan="5">Foo</th>
    </tr>
    <tr>
      <th>19</th>
      <th>20</th>
      <th>21</th>
      <th>22</th>
      <th>23</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Foo</td>
      <td colspan="5">Foo</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td rowspan="2">Foo</td>
      <td colspan="5">Foo</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td rowspan="2">Foo</td>
      <td colspan="5">Foo</td>
    </tr>
    <tr>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>

看起来很好：

我已在此预览中删除了许多列以使其更易于阅读，但稍后会有更多列，因此我在表格的overflow-x:auto处添加了div样式。这也很好，但是一旦你向右滚动你就不能再查看第一列了，但是我希望它一直保持可见。当我在第一列上尝试float:left或position:absolute之类的解决方案时，它会像我想要的那样修复，但它会与rowspan列混淆。

当我使用colspan属性时，如何获得固定的第一列？ 如果需要，它也可以使用JavaScript，但我更喜欢使用CSS。 如果只能使用JavaScript，我需要一个不会改变表的一般设计中的任何内容的库，如果固定列真的被修复并且不会在滚动后移回原始位置，那将会很好

它在IE6上运行也很重要，因此使用position: sticky的解决方案无法正常工作