不正確對齊

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

它解決了問題。