Can HTML table cells be rearranged with CSS?

Question

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 1

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

Answer 2

No such feature at the moment in CSS.

CSS3 will offer flexbox model in one form or another (work on it is in active development at the moment at W3C). It should allow you to do what you want.