不正确对齐

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;）

它解决了问题。