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>

View on JSFiddle

Answer 2

目前在CSS中没有这样的功能。

CSS3将以某种形式提供flexbox model（目前正在W3C正在积极开发）。它应该允许你做你想要的。

Answer 3

你可以用脏的方式做，你总是可以尝试使用浮动功能。

但是对于您提供的最后一个设计作为示例，我认为您应该可以使用宽度（顶部应该是宽度：100％;其他2应该是50％）

Answer 4

你可以做所有这三个，使用适当的标记，虽然添加了，并且有一点css。 http://jsfiddle.net/jalbertbowdenii/xvBhF/

公平警告：我不确定这样处理表格数据有多好，我只想说他们没有，但无论如何，如果你要上市，那么你可能想要调查一下。我敢肯定，所有的html属性风格都只有表格风格。

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

4 个答案: