nicht angemeldet
Spalten "umsortieren"
Ich habe folgende Anforderung:
Mittels CSS soll eine Spalte einmal an der 1. dann an der 2.Position in einer Tabelle erscheinen.
mein Ansatz: Information redundant einbauen (sprich die Spalte an 1. und 3. Position) und eine davon ausblenden
Ich habe ein bisschen herumgespielt: Ausblenden auf colgroup/col funktioniert nicht in allen Browsern.
=> Ausblenden der einzelnen TDs.
Hier mein Versuchscode:
<html>
<head>
<style type="text/css">
<!--
table { width: 600px; }
td { border: 1px solid #000; }
.col1 { width: 200px; }
.col2 { width: 300px; }
.col3 { width: 200px; }
.col4 { width: 100px; }
.first { display: none; }
.second { }
-->
</style>
</head>
<body>
Vergleichsbreite 600px:
<table>
<td>Breite</td>
</table>
Variante 1:
<table>
<colgroup>
<col class="col1">
<col class="col2">
<col class="col3">
<col class="col4">
</colgroup>
<td class="first">Datum</td>
<td>Bezeichnung</td>
<td class="second">Datum</td>
<td>Link</td>
</table>
Variante 2:
<table>
<colgroup>
<col class="col2">
<col class="col3">
<col class="col4">
</colgroup>
<td class="first">Datum</td>
<td>Bezeichnung</td>
<td class="second">Datum</td>
<td>Link</td>
</table>
</body>
</html>
Nun zum Problem:
Wenn alle Spalten in der colgroup definiert werden, passen die Dimensionen gar nicht mehr (Variante 1).
Lasse ich eine Weg passts so weit (Variante2). Ändere ich nun die Styles auf
table { width: 600px; }
td { border: 1px solid #000; }
.col1 { width: 200px; }
.col3 { width: 300px; }
.col2 { width: 200px; }
.col4 { width: 100px; }
.first { }
.second { display: none; }
machts genau das, was ich erwarte (in allen getesteten Browsern). D.h. über die Änderung der display-Eigenschaft wird die andere Spalte ausgeblendet. Für die korrekte Breitendefinition muss die Definition von col2 und col3 getauscht werden.
Meine Frage: Ist das irgendwie überhaupt noch spezifikationskonform, was ich da mache. Ich konnte leider nirgends einen Hinweis darauf finden, wie colgroup lt. Sepzifikation reagieren muss, wenn eine Spalte (bzw. alle TDs dieser Spalte) auf display:none stehen.
Hat jemand vielleicht einen Link dazu oder kann bestätigen, dass das definierte Verhalten eben das ist, dass Elemente mit display:none behandelt werden, als wären sie gar nicht da? Und wenn ja, ist das nur in Tabellen so?
Bevor ich mich mit dem "Design" festlege: Das ganze sollte auch die nächsten Jahre (CSS-konform) und in kommenden Browsern noch funktionieren.
Vielleicht hat jemand noch einen gänzlich anderen (css-konformen, browserunabhängig funktionierenden) Ansatz, das zu bewerkstelligen?
DANKE
-
Hellihello
Vielleicht hat jemand noch einen gänzlich anderen (css-konformen, browserunabhängig funktionierenden) Ansatz, das zu bewerkstelligen?
auch wenns nicht schön ist: zwei oder mehrere Tabellen gefloatet nebeneinander?
frankx
-
Danke, aber
auch wenns nicht schön ist: zwei oder mehrere Tabellen gefloatet nebeneinander?
das wäre der performancetechnische Tod (Netzwerk, evtl. Modemzugang): Es geht nämlich um eine Art Umsatzliste, die sehr lang werden kann. Es ist mit der redundanten Spalte schon das Limit erreicht.
Meine Variante 2 würde ja funktionieren, aber kann mehr irgendwer sagen, ob das CSS-konform ist und ich mich darauf verlassen kann, dass (auch künftige) Browser ein TD mit display:none behandeln, als wäre es gar nicht da und ich somit eine col weniger in der colgroup definiere?
-
Hellihello
das wäre der performancetechnische Tod (Netzwerk, evtl. Modemzugang): Es geht nämlich um eine Art Umsatzliste, die sehr lang werden kann. Es ist mit der redundanten Spalte schon das Limit erreicht.
Das versteh ich nicht, denn das display:none verhindert doch nicht, dass die Tabelle komplett eingelesen würde. Du hättest pro Spalte nur ein <table></table> mehr. Nicht jede Variante redundant, sondern die Spalten einzeln in eigene Tabellen und die dann an oder ausschalten. Denn zu u.g. kann ich nichts sagen aber komplette Tabellen "ein" und "ausschalten" ist doch in jedem Falle konform, oder?
Meine Variante 2 würde ja funktionieren, aber kann mehr irgendwer sagen, ob das CSS-konform ist und ich mich darauf verlassen kann, dass (auch künftige) Browser ein TD mit display:none behandeln, als wäre es gar nicht da und ich somit eine col weniger in der colgroup definiere?
frankx
-
-