Table与滚动条的对齐方式不正确

Question

我想做的就像下面一样，

我必须在表格中部分使用滚动条，所以我想我该怎么做。

我的结论是使用 THREE 表并正确找到它们。

第一张桌子是上面一张，有全宽。第二个是左下表，左侧有滚动条和黄色背景。

第三个是最后一个，天蓝色+蓝色。

问题是，如您所见，对齐方式不正确。 粉红色背景和天蓝色背景不垂直匹配。

此外，在IE中，第三个表位于第二个表下，而不是水平对齐。

我做了一个小提琴。 （https://jsfiddle.net/bexoss/ru2b9gmq/1/）

// Please see the fiddle, that has below code 

// save each of table1's td width
var tds = [$('.td1').width(), $('.td2').width(), $('.td3').width(), $('.td4').width(), $('.td5').width() ];

// set table2-wrapper's width to tds[0] + tds[1], and make it scrollable
$('.table2-wrapper').css({'display' : 'inline-block', 'width' : Number(tds[0] + tds[1]),'height': $('#table1').height(), 'overflow-y': 'scroll','padding' : 0, 'margin' : 0 });

// set table3-wrapper's width to tds[2]+tds[3]+tds[4] 
$('.table3-wrapper').css({'display' : 'inline-block', 'width' : Number(tds[2] + tds[3] + tds[4] ),'height': $('#table1').height(),'padding' : 0, 'margin' : 0 });

// set table3's first row's width to same with table1's red row 
$('.table3-td1').css('width', tds[2]);

如何才能使其正确对齐或更好的想法？

Answer 1

我找到了解决方案。

只需使用1个表（位置：相对;），

和另一个表（位置：绝对;底部：0;左：0;）

它解决了问题。