Как разбить таблицу с помощью CSS по диагонали или по вертикали?

Question

Если у вас есть <table>, который либо очень высокий, либо очень широкий, и вы хотите, чтобы он был перенесен для отображения на экране.Как это можно сделать с помощью CSS?

Пример: таблица с 300% высоты страницы и 30% ширины страницы будет разбита на три части.

#
#
#
#
#
#

до

# # #
# # #

Я ищу чистое решение CSS, возможно ли это?

Редактировать: Образец HTML

<table>
    <thead>
        <tr>
            <th>Foo</th>
            <th>Bar</th>
            <th>Baz</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>6</td>
            <td>1</td>
            <td>5</td>
        </tr>
        <tr>
            <td>42</td>
            <td>5</td>
            <td>34</td>
        </tr>
        [snip 100 lines]
        <tr>
            <td>4</td>
            <td>0</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

Answer 1

Вы можете использовать что-то похожее на:

tr {
    border: 1px dashed #f0f;
    float: left
}

Это будет работать в IE8 + и во всех современных браузерах.Сбой в IE7.

См .: http://jsfiddle.net/XeLUV/
или с width: http://jsfiddle.net/XeLUV/1/

Answer 2

Это невозможно сделать с помощью таблицы.Вам нужно будет разбить таблицу на три отдельные таблицы и отформатировать страницу оттуда.

CSS предоставляет функцию columns, которая позволяет отображать содержимое в элементах блока в столбцах (т.е.как газетные колонки), но это не будет работать с содержимым таблицы, и в любом случае он также имеет ограниченную поддержку браузера (не поддерживается в IE9; префиксы поставщиков в других местах), поэтому, вероятно, пока не рекомендуется для массового использования.* Но если вы хотите узнать больше об этом, Quirksmode имеет хорошее описание того, как использовать эту функцию: http://www.quirksmode.org/css/multicolumn.html

И вы можете увидеть текущую ситуацию с поддержкой браузера на CanIUse: http://caniuse.com/#search=columns