Можно ли переместить ячейки HTML-таблицы с помощью CSS?

Интересно, можно ли переупорядочить ячейки таблицы HTML, используя только CSS.

Например, может ли это

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

будет отображаться как:

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

или, возможно, даже это:

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

Это возможно только с помощью CSS или необходимо изменить узлы HTML?

РЕДАКТИРОВАТЬ: Некоторые из вас задавались вопросом, почему это вообще необходимо, так что вот реальная проблема, с которой я сталкиваюсь:

Я хочу отобразить список проблем, сообщаемых пользователями:

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

Я хотел оценить различные макеты. В первом варианте макета будет выделен пользователь отчетов, второй - для описания текста.

У меня нет никаких проблем при изменении структуры, и на самом деле я уже это сделал, но поскольку я кодировал это, я задавался вопросом, возможно ли это сделать с CSS. (Просто чистое любопытство)

Ответы

Ответ 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>

Ответ 2

В данный момент в CSS нет такой функции.

CSS3 предложит flexbox модель в той или иной форме (работа над ней находится в активной разработке на данный момент в W3C). Это должно позволить вам делать то, что вы хотите.

Ответ 3

вы можете сделать это грязным способом, вы всегда можете попытаться использовать функцию float.

но для последнего дизайна, который вы представили в качестве примера, я думаю, что вы должны иметь возможность играть с шириной (верхняя должна быть шириной: 100%, а другая 2 должна составлять 50%)

Ответ 4

вы можете делать все три, с надлежащей разметкой, хотя и добавлены, и прикосновение css. http://jsfiddle.net/jalbertbowdenii/xvBhF/

справедливое предупреждение: я не уверен, как хорошо справиться с манипулированием табличными данными, как это, я хочу просто сказать, что они этого не делают, но независимо от того, если вы собираетесь публиковать, вы, вероятно, захотите изучить это. я уверен, что есть способ со всеми атрибутами атрибутов html, которые только входят в стиль таблицы.