Мне нужно нарисовать таблицу со многими столбцами. Чтобы таблица вписывалась в экран, я решил напечатать заголовки столбцов по вертикали.заголовки столбцов вертикально - crossbw
Как реализовать кросс-браузерное решение для вывода вертикальных заголовков ? Браузеры: IE6 +, FF3.0 +, Opera 9.5+, Chrome 4.0+
.tableClass th {
writing-mode: tb-rl;
filter: fliph() flipV();
}
Для реализации кросс-браузер с помощью JQuery.
Посмотрите на эту дискуссию SO. Vertical text inside table headers using a JavaScript-based SVG library
Вот скрипка демонстрирует использование CSS3 Transform: http://jsfiddle.net/PhilippeVay/hXnsT/
IE имеет свое собственное вращающееся свойство (с шагом 90 °, что было бы хорошо для ваших нужд здесь), но я не включил его в сценарий, потому что происхождение вращения не то же самое, что для преобразования CSS3.
Эта скрипка была ответом How to create vertical table heading text with html5 canvas?. Другое решение от @ dev-null-dweller использует canvas, поэтому вам придется рассматривать старый IE отдельно. Единственное, чего не хватает в его решении, - это оригинальный текст. Текст должен быть помещен в диапазон или div и перемещен из области просмотра с text-indent: -9999px; position: absolute;. Таким образом, читатели экрана все равно будут читать текстовое содержимое своим пользователям (холст еще не доступен)