LINUX.ORG.RU

Как отобразить текст вертикально в HTML <table>?

 , ,


0

1

Сабж.

Гугл подсказал кучу методов с тонной CSS, которые у меня не работают. Видел даже пару примеров с JS. Столько усилий ради поворота текста?!

Мне много не надо: вывести текст в заголовке таблицы вертикально (-90 градусов). Без JS и с поддержкой всеми браузерами.

PS: в веб-разработке 0.

в веб-разработке 0.

этого можно было не писать

если не работает, то все плохо, твой браузер не поддерживает rotate. w3m?

anonymous_sapiens ★★★★★ ()
<table>
<tr>
<td style='-moz-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); 
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
'>Заголовок</td>
... 
</tr>
...
</table>
r0ck3r ★★★★★ ()
Ответ на: комментарий от r0ck3r

Я этот пример видел, но текст рисуется как бы поверх ячейки, а не растягивает её по высоте.

RazrFalcon ★★★★★ ()
Ответ на: комментарий от RazrFalcon

.my_awesome_class { transform: rotate(90deg); }
Где my_awesome_class присвоен элементу содержащему нужный текст и находящемуся в соответствующей ячейке таблицы. Размер этой ячейки вроде надо вручную подгонять

MrClon ★★★★★ ()
Ответ на: комментарий от RazrFalcon

Высота не будет подгоняться динамически для трансформированных элементов, потому что они рисуются отдельно.

Ты можешь менять высоту с помощью js, но тебе же хочется странного, так что страдай.

Столько усилий ради поворота текста?!

Усилий нет никаких, на самом деле. Ты сам себе сложности придумываешь просто.

int64 ()
Ответ на: комментарий от RazrFalcon

Оказалось, работает только в лисе. В Chrome writing-mode не работает даже с префиксом, хотя вроде было указано поддерживаемым.

i-rinat ★★★★★ ()
Ответ на: комментарий от RazrFalcon

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

anonymous ()
Ответ на: комментарий от anonymous

Учитывая проблематичность его отображения - нет.

RazrFalcon ★★★★★ ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.