Daniel Rikowski Daniel Rikowski - 4 days ago 6
CSS Question

Can HTML table cells be rearranged with CSS?

I wonder if it is possible to rearrange HTML table cells using only CSS.

For example can this

------------------------------------------------
| A | B | C |
------------------------------------------------


be displayed as:

------------------------------------------------
| C | A | B |
------------------------------------------------


or perhaps even this:

-------------------------
| A |
-------------------------
| B | C |
-------------------------


Is this possible with CSS only or is it necessary to modify the HTML nodes?

EDIT: Some of you were wondering why this is needed at all, so here's the real-life problem I'm facing:

I want to display a list of issues reported by users:

------------------------------------------------------------------------------
| Problem description (A) | Reporting user (B) | Link to affected entity (C) |
------------------------------------------------------------------------------


I wanted to evaluate various layouts. The first layout variant would emphasize the reporting user, the second one would emphasize the text description.

I don't have any problem in changing the structure, and in fact I already did, but as I was coding this, I wondered if it is possible to do with CSS. (Just pure curiosity)

Answer

You can, but it's not the best thing to do though (see other answers).
Here's my example:

*{margin:0; padding:0}
.type-a .b {width: 50%; float:left;}
.type-a .a {width:100%; float:left;}
.type-a .c {width: 50%; float:left;}

.type-b .b {width: 25%; float:left;}
.type-b .a {width: 50%; float:right;}
.type-b .c {width: 25%; float:left;}
<table class="type-a" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="a" style="background-color:#060">A</td>
    <td class="b" style="background-color:#006">B</td>
    <td class="c" style="background-color:#600">C</td>
  </tr>
  <tr>
    <td class="a" style="background-color:#060">A</td>
    <td class="b" style="background-color:#006">B</td>
    <td class="c" style="background-color:#600">C</td>
  </tr>
</table>

<br />
<br />
<table class="type-b" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="a" style="background-color:#060">A</td>
    <td class="b" style="background-color:#006">B</td>
    <td class="c" style="background-color:#600">C</td>
  </tr>
  <tr>
    <td class="a" style="background-color:#060">A</td>
    <td class="b" style="background-color:#006">B</td>
    <td class="c" style="background-color:#600">C</td>
  </tr>
</table>

View on JSFiddle

Comments