Разделить стол пополам - PullRequest
Новая
       4

Разделить стол пополам

12 голосов
/ 07 июня 2011

Есть ли в любом случае разделить таблицу пополам с помощью CSS и отобразить две части рядом.

Например, возьмите это: 

| row1 | row1 | row1 |
| row2 | row2 | row2 |
| row3 | row3 | row3 |
| row4 | row4 | row4 |
| row5 | row5 | row5 |

И сделайте так:

| row1 | row1 | row1 |    | row4 | row4 | row4 |
| row2 | row2 | row2 |    | row5 | row5 | row5 |
| row3 | row3 | row3 |

Я могу изменить разметку HTML (например, пометить «разрывную» строку пользовательским классом), но я должен иметь возможность решить, будет ли таблица разбиваться или нет с помощью CSS.

Я знаю, что могу использовать две таблицы и использовать display:inline-table, но я должен использовать только одну таблицу, потому что мне нужна постоянная ширина столбца (таблица должна иметь автоматическое расположение).

1 Ответ

5 голосов
/ 07 июня 2011

вы можете использовать несколько столбцов, но это свойство CSS3.Например: 

-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap: 20px;
column-count: 2;
column-gap: 20px;

Это должно работать в современных браузерах

Вы также можете попробовать этот метод

http://www.csscripting.com/css-multi-column/

...