当表包含不同的colSpans和rowSpans时，html表固定了行和列

Question

关于Questions的{p> fixed headers and columns非常丰富，css / javascript / jQuery解决方案也是如此。
不幸的是，none solutions的work当我有一张不同的colSpan和rowSpan s的表格时;

所以，让我们以此表为例：

<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

我尝试使用位置：为你的thead修复它并且它可以工作但是：

• 我需要2个表，因为你的tbody结构与thead位置不一样：仅固定。所以我制作了第一张桌子只有固定的桌子，在secound桌子里我有相同的标题，没有固定，以获得相同的tbody结构。

我无法解决的问题是，固定的thead与tbody的宽度不同。

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