Daniel Rikowski Daniel Rikowski - 10 months ago 55
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 Source

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