Jquery 表格与滚动条的对齐不正确

我想做的是如下所示

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

我的结论是，只需使用三个表格，并适当地定位它们

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

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

正如您所看到的，问题在于对齐不正确。 粉红色背景和天蓝色背景在垂直方向上不匹配

此外，在IE中，第三个工作台位于第二个工作台下方，未水平对齐

我做了一把小提琴。（）

我怎样才能使它正确地对齐，或者有更好的想法呢？

我找到了解决方案

只需使用1个表（位置：relative；）

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

它解决了这个问题

// 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]);