CSS / HTML для отображения строк вертикальной таблицы (или эквивалент)

Question

CSS / HTML для отображения строк вертикальной таблицы (или эквивалент)

0

Я ищу некоторую помощь в попытке отобразить свои табличные данные в определенном формате:

column 1 | column 2 | column 3 | column 4 |
-------------------------------------------
1-1      | 2-1      | 3-1      | 4-1      |
-------------------------------------------
1-2      | 2-2      | 3-2      | 4-2      |
-------------------------------------------
1-3      | 2-3      | 3-3      | 4-3      |
-------------------------------------------

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

Есть ли способ, которым может быть достигнута эта схема? Он не должен быть таблицами - css с типами дисплеев будет так же хорош.

John Crest 19 сен. 2013, в 15:23

Источник

Теги:

html

css

2 ответа

Ещё вопросы

Maloric · Answer 1 · 2013-09-19T09-58-00.000Z

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

HTML:

<div class="data">
    <div class="col">
        <div class="cell">
            1-1
        </div>
        <div class="cell">
            1-2
        </div>
        <div class="cell">
            1-3
        </div>
    </div>
    <div class="col">
        <div class="cell">
            2-1
        </div>
        <div class="cell">
            2-2
        </div>
        <div class="cell">
            2-3
        </div>
    </div>
    <div class="col">
        <div class="cell">
            3-1
        </div>
        <div class="cell">
            3-2
        </div>
        <div class="cell">
            3-3
        </div>
    </div>
</div>

CSS:

.col {float:left;}
.cell {height:50px; padding:10px; border:1px solid #ccc;}

Пример JSFiddle: http://jsfiddle.net/kj5Dd/

Недостатки:

Вышеупомянутый метод не применяет каждую строку для выравнивания или для той же высоты, что и выравнивание столбцов таблицы. Вот почему класс .cell имеет фиксированную высоту. Вы могли бы достичь этого, используя javascript - цикл через каждую строку и вычисление максимальной высоты для первой ячейки, второй ячейки и так далее. Затем вам нужно будет установить высоту для каждой ячейки, использующей один и тот же индекс.

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

beautifulcoder · Answer 2 · 2013-09-19T11-18-00.000Z

Попробуйте обернуть каждый столбец вокруг div и установить display:inline-block. Недостатком является то, что каждый блок должен иметь фиксированную width и height.

http://jsfiddle.net/PZuZx/1/