nicht angemeldet
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