469,284 Members | 2,488 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,284 developers. It's quick & easy.

"rearrangable" columns with CSS?

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

May 16 '06 #1
0 1248

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

10 posts views Thread by VA | last post: by
2 posts views Thread by Kevin | last post: by
2 posts views Thread by CSL | last post: by
13 posts views Thread by scorpion53061 | last post: by
5 posts views Thread by Gary Blakely | last post: by
2 posts views Thread by Dibs | last post: by
1 post views Thread by thomasp | last post: by
5 posts views Thread by explode | last post: by
1 post views Thread by CARIGAR | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.