Hi,
the requirement is to show a table's column at first or second position
depending on css.
my idea is to put the information twice into the table, as first and
third column hiding one of them
I've already tried to set display property on colgroup's col element
but this doesn't work in all browsers (especially ie). So now I'm doing
that on the TD elements.
Here is the code I experiment with:
<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>
600px width
<table>
<td>Width assumed</td>
</table>
Version 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>
Version 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>
The problem is:
Defining all cols in colgroup results in an incorrect table width
(version 1).
Using version 2 (defining only 3 of the 4 columns) everything seems to
work properly.
Changing the styles to
table { width: 600px; }
td { border: 1px solid #000; }
.col1 { width: 200px; }
.col3 { width: 300px; }
.col2 { width: 200px; }
.col4 { width: 100px; }
.first { }
.second { display: none; }
does what I need (in all tested browsers: ie, mozilla, opera). So I
swap the display property on classes first and second and also swap the
width definition of col2 and clo3.
Now my question: Is that compliant to the css specification. I couldn't
find a hint on how colgroup has to react when TDs are set with
display:none.
Is it really defined that elements set to display:none are handled as
not avialable in general? Has anyone a link to a specification document
describing that? Or is that just a common interpretation of browsers
and could change anytime?
I don't want to use my working solution if its not future safe (css
compliant).
Or: Has anyone another solution to accomplish the column rearrange task
(only using css, no javascript, css compliant, browser independent)?
thanks in advance
