IE 8 macht etwas sehr seltsames, wenn ich eine Spalte in einer Tabelle mit Tabellenlayout verstecke: behoben. Die Spalte ist ausgeblendet, das Tabellenelement bleibt gleich breit, aber die tbody- und thead-Elemente werden nicht so skaliert, dass sie die verbleibende Breite ausfüllen. Es funktioniert im IE7-Modus (und FF, Chrome, etc. natürlich). Hat jemand das schon einmal gesehen oder kennt einen Workaround?
Hier ist meine Testseite - schalten Sie die erste Spalte um und benutzen Sie die Dev-Konsole, um die Tabelle, tbody und thead width zu überprüfen:
%Vor% Ein einfacher Workaround für IE8 besteht darin, der Tabelle einen Schub zu geben, damit IE8 die Spaltenbreite basierend auf den verbleibenden Spalten anpassen kann. Unter der Annahme, dass table auf die Tabelle zeigt, wird Folgendes der Fall sein:
Credits: Ich habe diese Technik zuerst aus Srikanths Blog gelesen . Als Referenz dient hier das aktualisierte Beispiel , das diese Technik verwendet.
Ich sollte jedoch beachten, dass diese Technik nicht immer funktioniert. Ich sehe einen Fall in einer komplizierteren App, bei der keine Stiländerung möglich ist, IE zu überzeugen, die Anzahl der Spalten zu berücksichtigen (sorry, ich habe keinen einfacheren reproduzierbaren Fall). Glücklicherweise löst IE9 dieses Problem vollständig.
Habe gerade einen hässlichen Hack gefunden - Wähle eine sichtbare Spalte, die den leeren Raum füllen soll und gib ihm die Klasse "colspanfix". Rufen Sie diese Funktion auf, nachdem die andere Spalte umgeschaltet wurde (aus Gründen der Kürze mit jQuery):
%Vor%Er prüft, ob das Tabellenelement breiter als das tbody-Element ist, und weist dann den Elementen mit der Klasse "colspanfix" einen colspan-Wert zu. Der Kicker ist, dass er den Colspan für jedes Hide / Show um eins erhöhen muss. Nicht sehr hübsch, aber es funktioniert.
Tags und Links javascript html-table internet-explorer-8 toggle