HTML表格单元格可以用CSS重新排列吗？

Question

我想知道是否可以仅使用CSS重新排列HTML表格单元格.

例如可以这样

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

显示为:

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

或者甚至是这样的:

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

这只能用于CSS还是修改HTML节点？

编辑:有些人想知道为什么这是必要的,所以这是我面临的现实生活中的问题:

我想显示用户报告的问题列表:

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

我想评估各种布局.第一个布局变体将强调报告用户,第二个将强调文本描述.

我没有任何问题,在改变结构,事实上,我已经做了,但是当我编写此,我想知道是否有可能用CSS做.(只是纯粹的好奇心)

Answer 1

您可以，但这不是最好的选择（请参阅其他答案）。
这是我的例子：

*{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>

在 JSFiddle 上查看