0
は以下のようなものです、不正な整列私がやろうとしています何
私は部分的にテーブルにスクロールバーを使用する必要がありますので、私は、私はそれを行うことができる方法を考えます。
私の結論は、THREEテーブルを使用し、これらを適切に見つけることです。
最初のテーブルは上のもので、全幅を持っています。 2番目はスクロールバーと黄色の背景を持つ左のテーブルの下にあります。
最後の1つはスカイブルー+ブルーです。
ご覧のとおり、問題は整列が正しくありません。 ピンクの背景とスカイブルーの背景が垂直に一致しません。
さらに、IEでは、第3のテーブルは、第2のテーブルの下に位置し、水平に整列していない。
私はフィドルを作った。 （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]);
は、どのように私はそれが正しくスマートに整列または任意のより良いアイデアすることができますか？