nicht angemeldet
Rolf BHallo,
soweit ich weiß, kann man mit HMTL/CSS immer noch nicht sagen, dass einige Zeilen oder Spalten einer Tabelle fixiert bleiben sollen, wenn man scrollt. Der Workaround: der fixierte Teil kommt in eine eigene Tabelle.
Hab ich gemacht. Zwei Tabellen, mit Flexbox nebeneinander gesetzt.
Die rechte Tabelle hat drei Spalten-Kopfzeilen, die sollen horizontal mitscrollen. In der linken Tabelle gibt's die nicht.
Die Zeilenhöhe habe ich auf 1.5em gesetzt, und weil die linke Tabelle die drei Kopfzeilen nicht hat, bekommt sie margin: 4.5em;
Ich habe dem gesamten Areal ein box-sizing:border-box gegeben. Soweit ich erkennen kann, wird das auch nirgends durch Browser-Stylesheets überschrieben.
Tabellenzellen mit Inhalt haben eine 1px Border. Füllzellen haben border:none.
Ungezoomt sieht's im Chrome noch gut aus. Mit Zoom sind die Zellen der linken und rechten Tabelle nicht auf einer Höhe. Im Firefox brauche ich nicht mal zu zoomen, damit es nicht passt.
https://jsfiddle.net/w5g8ovmt/2/
In den Entwicklerwerkzeugen behaupten die Browser treuherzig, dass alle Rows 24px hoch seien (was am von mir eingestellten 16px Font liegt). Aber auch wenn ich Zeilenhöhe aller Zellen und margin-top der linken Tabelle in Pixeln angebe, ändert sich das Problem nicht.
Der Workaround ist, der linken Tabelle drei Spacer-Rows voranzustellen und allen Zellen, die rahmenlos sein sollen, mit border:1px solid white einen unsichtbaren Rahmen zu geben. Dann passt es.
Es scheint so zu sein, dass trotz box-sizing:border-box die Zellen durch das Setzen der Border eine Spur höher werden. Minimal, weniger als ein Pixel. Es akkumuliert sind. Wenn ich stark zoome, kann ich die Verschiebung durch margin-top: 4.55em (Wert je nach Zoom) der linken Table ausgleichen.
Oder ich gebe der flex-box ein align-items:flex-end.
Das sind aber alles Workarounds. Ich frage mich, was ich falsch mache, dass trotz box-sizing:border-box die Zellen durch das Setzen einer Border größer werden?
Rolf
sumpsi - posui - obstruxi
Gunnar Bittersmann
JürgenB