Транспонирование таблицы средствами CSS

[radioheaded]

Необходимо транспонировать обычную HTML-таблицу средствами лишь одного CSS. Только не спрашивайте, зачем это нужно, и не советуйте генерировать ее по-другому на сервере )

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

Чтобы было понятно: есть обычная таблица table, thead, tbody, ... все как полагается. Необходимо, чтобы все tr стали колонками, thead будет первой колонкой с заголовками для строк, а tbody будет контейнером для остальных колонок; первые td в каждом tr образуют шапку таблицы.

Я попробовал несколько вариантов, типа tr'ам задать display:block и float:left, td'шкам display:block и дальше в таком же духе. Отсюда естественные проблемы: блоки съезжают, если ширина таблицы больше ширины страницы; если в имитации шапки сделать довольно длинные заголовки, то увеличенная высота отдельных td выбивает колонку из общей массы.

Да, табличку хочется резиновую, иначе, наверное, и проблем особо бы не было =) Заранее спасибо за любую помощь. Ответ «это невозможно, а ты извращенец» меня тоже вполне устроит )

[swetlana]

Это невозможно, а ты извращенец.

Задача явно не из простых. Теперь тоже интересно, как такое сделать. Надо будет попробовать.

[Vlad]

Ааааааа, я не верю, но это возможно!!! Позже выложу решение, доведу до ума его.

[radioheaded]

В общем-то, я почти сделал, но с некоторыми ограничениями + пока на кроссбраузерность не проверял. Меня не сильно волнует IE6, и я бы даже на IE7 плюнул, пожалуй. Но все же буду рад увидеть ваши решения ) Спасибо.

[SelenIT]

Хм... ротейтнуть табличку на 90° (любым доступным способом, сейчас их много развелось), а содержимое каждой ячейки обернуть в отдельный контейнер и ротейтнуть его обратно?

[Vlad]

Так и сделал. Некрасиво получается.

table {
	width: 500px;
	-moz-transform: rotate(90deg);
	-moz-transform-origin: left bottom;
   }
   table td {
	-moz-transform: rotate(-90deg);
   }

[radioheaded]

Так и сделал. Некрасиво получается.

table {
	width: 500px;
	-moz-transform: rotate(90deg);
	-moz-transform-origin: left bottom;
   }
   table td {
	-moz-transform: rotate(-90deg);
   }

Некрасиво?) У меня вообще какой-то адский ад с таким раскладом

В общем, я сделал так

table.transp {
	display: block;
}
table.transp tbody tr {
	width: 100px;
}
table.transp .label {
	height: 40px;
	text-align: center;
	line-height: 100%;
}

table.transp tr,
table.transp thead {
	display: block;
	float: left;
}
table.transp tr td,
table.transp tr th {
	display: block;
}

.label это первая ячейка в каждой строке, пришлось зафиксировать высоту, иначе длинные заголовки расшатывают весь забор. Сейчас проблема в том, что если колонок слишком много и они должны выехать за страницу, то они просто сваливаются вниз, что естественно при таких стилях. Как создать горизонтальную прокрутку в этом случае?

И может быть кто-то когда-то зачем-то верстал таблицу блоками на колонках, а не строками, как обычно? Может есть нормальное решение с какой-то другой структурой HTML?