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

0

1

Сабж.

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

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

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

Ссылка

←	SyntaxError: Unexpected token ' in JSON at position 32. Почему?

Прозрачный прокси webapi

→

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

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

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

anonymous_sapiens ★★★★★
(20.02.17 00:18:20 MSK)

Ответ на: комментарий от anonymous_sapiens 20.02.17 00:18:20 MSK

Откуда мне знать? Дайте пример.

~~RazrFalcon~~ ★★★★★
(20.02.17 00:18:52 MSK) автор топика

<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 ★★★★★
(20.02.17 00:20:56 MSK)

Ответ на: комментарий от r0ck3r 20.02.17 00:20:56 MSK

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

~~RazrFalcon~~ ★★★★★
(20.02.17 00:23:22 MSK) автор топика

Ссылка

Ответ на: комментарий от RazrFalcon 20.02.17 00:18:52 MSK

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

MrClon ★★★★★
(20.02.17 00:26:52 MSK)

Ответ на: комментарий от MrClon 20.02.17 00:26:52 MSK

Размер этой ячейки вроде надо вручную подгонять

Такой вариант не подходит.

~~RazrFalcon~~ ★★★★★
(20.02.17 00:31:29 MSK) автор топика

https://jsfiddle.net/hw2mon21/

i-rinat ★★★★★
(20.02.17 00:51:44 MSK)

Ответ на: комментарий от i-rinat 20.02.17 00:51:44 MSK

90, а не 180

~~RazrFalcon~~ ★★★★★
(20.02.17 00:52:19 MSK) автор топика

Ответ на: комментарий от RazrFalcon 20.02.17 00:31:29 MSK

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

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

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

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

~~int64~~
(20.02.17 00:54:29 MSK)

Ответ на: комментарий от int64 20.02.17 00:54:29 MSK

но тебе же хочется странного

С каких пор вертикальный текст стал чем-то странным?

~~RazrFalcon~~ ★★★★★
(20.02.17 00:55:31 MSK) автор топика

Ответ на: комментарий от RazrFalcon 20.02.17 00:52:19 MSK

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

i-rinat ★★★★★
(20.02.17 00:56:15 MSK)

Ссылка

Ответ на: комментарий от RazrFalcon 20.02.17 00:55:31 MSK

Вертикальный текст ничем, но твоя проблема ведь не в тексте.

~~int64~~
(20.02.17 00:56:30 MSK)

Ответ на: комментарий от int64 20.02.17 00:56:30 MSK

Твоя-то проблем в чём, болезненный?

~~RazrFalcon~~ ★★★★★
(20.02.17 00:59:47 MSK) автор топика

Ответ на: комментарий от RazrFalcon 20.02.17 00:52:19 MSK

Во, так вроде работает: https://jsfiddle.net/f23p5g5z/

i-rinat ★★★★★
(20.02.17 01:05:40 MSK)

Ответ на: комментарий от RazrFalcon 20.02.17 00:59:47 MSK

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

anonymous
(20.02.17 07:53:50 MSK)