我想知道是否可以仅使用 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。 (纯属好奇)
最佳答案
可以,但这不是最好的做法(请参阅其他答案)。
这是我的例子:
*{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>
关于html - HTML 表格单元格可以用 CSS 重新排列吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7373177/