nicht angemeldet
Wieso funktioniert box-sizing:border-box in Tabellen nicht richtig?
Rolf B
Wieso funktioniert box-sizing:border-box in Tabellen nicht richtig?
Rolf B
Gunnar Bittersmann
JürgenBHallo,
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
sumpsi - posui - obstruxi
-
@@Rolf B
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.
Das solltest du besser wissen; du warst an dem Thread beteiligt.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
“Turn off CSS. If the page makes no sense, fix your markup.” —fantasai-
Hallo Gunnar,
über zwei Jahre, tja. Mein Gedächtnis.
Was ich zu erwähnen vergaß: Meine Baseline für 100% Funktionsumfang ist immer noch der IE 11, weil meine Nutzer genau den verwenden. Da gibt's nichts zu diskutieren. Und bevor Du Luft für Einwände holst: doch, ich kenne meine Nutzer. Sie sind im Firmen-Intranet. Ausschließlich.
Die Fixierung der Zeilenköpfe ist kein PE-Kandidat. Deswegen fällt position:sticky aus, und deswegen hat sich dieses Feature vermutlich bisher auch nicht in meinem Kopf festgesetzt.
Und ich weiß auch noch nicht, ob ich eine Fixierung für links und oben brauche. Das habe ich beim Probieren gerade nicht hinbekommen, es schien nur für eine Achse zu gehen.
Übrigens wird die Merkwürdigkeit mit den Zeilenhöhen durch position:sticky auch nicht erklärt. Bleibt mir nur der Workaround mit weißen Rändern?
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
über zwei Jahre, tja.
Und in den zwei Jahren haben die es bei Chromium immer noch nicht gebacken gekriegt,
position: stickyfürtheadzu implementieren‽‽ Und das, obwohl jetzt auch noch die Entwickler von Microsoft hinzugekommen sind?Was ich zu erwähnen vergaß: Meine Baseline für 100% Funktionsumfang ist immer noch der IE 11, weil meine Nutzer genau den verwenden. Da gibt's nichts zu diskutieren. Und bevor Du Luft für Einwände holst: doch, ich kenne meine Nutzer. Sie sind im Firmen-Intranet. Ausschließlich.
Und warum verwenden die nicht Edge? IE-Modus für den Intranet-Kram, Chromium-Modus fürs Web?
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
“Turn off CSS. If the page makes no sense, fix your markup.” —fantasai-
Hallo Gunnar,
Und in den zwei Jahren haben die es bei Chromium immer noch nicht gebacken gekriegt, position: sticky für thead zu implementieren‽‽
Nee, man muss
thead thverwenden. Keine Ahnung warum.Und warum verwenden die nicht Edge?
Weil wir (a) den Chrodge offiziell erst seit 2 Monaten auf der (Windows 7) Terminal Server Farm haben und weil ich (b) gerade eine Add-On Seite für eine Hersteller-Webseite stricke, die Java Applet verpestet ist und daher NUR noch im IE läuft. Ich werde es nicht schaffen, den Anwendern klarzumachen, dass sie die Herstellerseite im IE aufrufen müssen und die Addon-Seite im Edge. Ich kann's versuchen, aber die Hälfte wird das Addon trotzdem im IE öffnen oder die Herstellerseite im Edge und ich krieg die Defect-Tickets. Es wird irgendwann besser, aber es dauert noch.
Meine Seite ist ja auch nur eine kleine Ecke in den diversesten Webseiten, die Hinz, Kunz oder Fiffi für irgendwen baut. Ich kann da gar nichts vorgeben, und wenn man es versuchte, macht es die Hälfte der Leute trotzdem falsch.
Immerhin scheinen sie jetzt Sharepoint hochgerüstet zu haben, bisher liefen dessen Seiten im IE8 Kompatibilitätsmodus 🤯.
Traurige Realität.
Rolf
--
sumpsi - posui - obstruxi-
@@Rolf B
Und warum verwenden die nicht Edge?
Weil wir (a) den Chrodge offiziell erst seit 2 Monaten auf der (Windows 7) Terminal Server Farm haben und weil ich (b) gerade eine Add-On Seite für eine Hersteller-Webseite stricke, die Java Applet verpestet ist und daher NUR noch im IE läuft. Ich werde es nicht schaffen, den Anwendern klarzumachen, dass sie die Herstellerseite im IE aufrufen müssen und die Addon-Seite im Edge. Ich kann's versuchen, aber die Hälfte wird das Addon trotzdem im IE öffnen oder die Herstellerseite im Edge und ich krieg die Defect-Tickets. Es wird irgendwann besser, aber es dauert noch.
FYI: Microsoft will bid farewell to Internet Explorer and legacy Edge in 2021
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
--
“Turn off CSS. If the page makes no sense, fix your markup.” —fantasai-
FYI: Microsoft will bid farewell to Internet Explorer and legacy Edge in 2021
Irreführende Überschrift. Clickbait. Darunter steht es schon treffender: „Microsoft’s services will drop support for IE11 in a year“.
-
Hallo Mitleser,
dachte ich mir auch so; ich hatte nur keine Zeit zum genaueren Nachlesen der IE11-Roadmap.
Immerhin wurde der IE11 bereits letztes Jahr für Windows Server 2012 (der Windows Server der auf Win8 basiert) und Windows Embedded 8 bereitgestellt, um dort den IE10 abzulösen. Wow!
Das letzte Update, das der IE11 auf meiner Win-Dose bekommen hat, ist KB4571687: Kumulatives Sicherheitsupdate für Internet Explorer: 11. August 2020.
Gilt für:
- Internet Explorer 11 on Windows Server 2012 R2
- Internet Explorer 11 on Windows Server 2012
- Internet Explorer 11 on Windows Server 2008 R2 SP1
- Internet Explorer 11 on Windows 8.1 Update
- Internet Explorer 11 on Windows 7 SP1
- Internet Explorer 9 on Windows Server 2008 SP2
Der IE11 ist nicht die einzige Altlast, die Microsoft nicht loswird.
Aber bei der letzten Zeile hoffe ich ja, dass sie da etwas zu löschen vergessen haben. Windows Server 2008 ohne R2 ist der Windows Server auf Codebasis von Windows Vista (der Marianengraben zwischen zwischen XP und Win7). Dessen Belieferung mit Updates wurde schon vor Ewigkeiten eingestellt. Am 14.01.2020!!!
Erste Punkt der Release-Informationen zu KB4571687 ist:
Seit dem 11. Februar 2020 wird Internet Explorer 10 nicht mehr unterstützt. Ey boah ey.
Rolf
--
sumpsi - posui - obstruxi-
dachte ich mir auch so; ich hatte nur keine Zeit zum genaueren Nachlesen der IE11-Roadmap.
Ich habe Microsoft immer so verstanden, dass der „Auslieferungsbrowser“ der jeweiligen Betriebssystemversion bis zum EOL des Betriebssystems unterstützt wird. So ist es AFAIR bislang ja auch immer abgelaufen. Beispielsweise Ende XP = Ende IE 6.
Abweichungen von dieser Politik sind mir nun von Spezialfällen, wie von Dir skizziert bekannt.
https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge
sollte Dich bei Deiner Sorge bzgl. IE 9 beruhigen. Der IE 7 ist allerdings noch für Windows Embedded Compact 7 / Windows Embedded Compact 2013 ein Thema. LOL.
Da Windows 10 nun ja aber endlose (in aktuellen Patchleveln) Laufzeit haben soll, ist der IE 11 damit quasi unsterblich.
Die Zeit wird das Problem sicher lösen, aber soweit ich das sehe, gibt es aktuell keinen definierten EOL für den IE11.
-
Hallo Mitleser,
Da Windows 10 nun ja aber endlose (in aktuellen Patchleveln) Laufzeit haben soll, ist der IE 11 damit quasi unsterblich.
So heißt es, aber ich bin sicher, dass irgendein Heini in Redmond überlegt, wie man Windows 10 loswerden könnte. Ich sag nur Core OS, Polaris, Andromeda... Neiiin, die sollen Win10 nicht ablösen, sondern ergänzen. nick zwinker
Rolf
--
sumpsi - posui - obstruxi
-
-
-
-
-
-
-
-
Hallo Rolf,
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.
hier meine Idee dazu, ein Extrakt aus diversen Diskussionen hier:
http://test.berkemeier.eu/TableSort_Beispiel_PerformancetestV3.html
Die erste Tabelle Scrollt im eigenen Container, die zweite mit der Seite.
Gruß
Jürgen