Was ich versuche, wie unten zu tun ist,Falsche align der Tabelle mit Scroll-Bar
Ich habe teilweise in der Tabelle Scroll-Leiste zu verwenden, so dass ich denke, wie ich es tun kann .
Meine Schlussfolgerung ist einfach THREE Tabellen verwenden und diese entsprechend lokalisieren.
Die erste Tabelle ist die obere, hat volle Breite. Der zweite ist unter, linke Tabelle, die Bildlaufleiste und gelben Hintergrund haben.
Die dritte ist die letzte, skyblue + blue one.
Das Problem ist, wie Sie sehen können, die Ausrichtung ist falsch. der rosa Hintergrund und der skyblue Hintergrund werden nicht vertikal gepasst.
Weitere mehr, in IE, die dritte Tabelle befindet sich in unter der zweiten Tabelle, nicht horizontal ausgerichtet.
Ich machte eine Geige. (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]);
Wie kann ich es machen richtig elegant oder eine bessere Idee ausgerichtet?