当表格包含不同的colSpan和rowSpan时，html表格固定行和列

Question

Questions 关于fixed headers and columns 的解决方案很丰富，css/javascript/jQuery 的解决方案也很丰富。
不幸的是，none 的solutions work 当我有一张不同colSpans 和rowSpans 的桌子时；

那么，我们以这张表为例：

<table >
    <thead>
        <tr >
            <td rowspan="2" class="row-header">[Product.Color]</td><td rowspan="2" class="row-header">[Product.SizeUnitMeasureCode]</td><td >False</td><td >True</td>
        </tr><tr>
            <td >True</td><td >True</td>
        </tr>
    </thead><tbody>
        <tr>
            <td rowspan="2" class="row-header">Blue</td><td class="row-header"></td><td >225.49</td><td ></td>
        </tr><tr>
            <td class="row-header">CM </td><td ></td><td >23790.17</td>
        </tr><tr>
            <td class="row-header">Grey</td><td class="row-header"></td><td >125</td><td ></td>
        </tr><tr>
            <td class="row-header">Multi</td><td class="row-header"></td><td >478.92</td><td ></td>
        </tr><tr>
            <td rowspan="2" class="row-header">Yellow</td><td class="row-header"></td><td >215.96</td><td ></td>
        </tr><tr>
            <td class="row-header">CM </td><td ></td><td >34311.33</td>
        </tr>
    </tbody>
</table>

(fiddle) （生成以下内容： )

（是的，您可能注意到我在这里谈论的是数据透视表 :)）。

我希望在垂直滚动表格内容时保留列标题部分（灰色背景），并在垂直滚动时保留行标题部分（红色文本）。

有什么想法吗？ （任何 css / jQuery / javascript 解决方案都将被接受:)）

Answer 1

我尝试使用 position: fixed 为你的头，它可以工作，但是：

• 我需要 2 个表格，因为您的 tbody 结构与 thead 位置不同：仅固定。因此，我只制作了第一个表，并且在第二个表中我有相同的标题，但没有固定以获得相同的 tbody 结构。

我无法为您解决的问题是，固定的头饰与 tbody 的宽度不同。

<thead style="position:fixed;"here is fiddle