заголовки столбцов по вертикали - поперечная полоса

Question

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

Как реализовать кросс-браузерное решение для вывода по вертикали заголовки? Браузеры: IE6 +, FF3.0 +, Opera 9.5+, Chrome 4.0 +

Answer 1

Вот скрипка, демонстрирующая использование CSS3 Transform: http://jsfiddle.net/PhilippeVay/hXnsT/
IE имеет свое собственное свойство поворота (с шагом 90 °, которое подойдет для ваших нужд), но я не включил его в скрипту, потому что начало вращения не такое, как для преобразования CSS3.

Эта скрипка была ответом на Как создать текст заголовка вертикальной таблицы с помощью html5 canvas? . Другое решение от @ dev-null-dweller использует canvas , поэтому вам придется рассмотреть старый IE отдельно. Единственное, чего не хватает в его решении, это оригинальный текст. Текст должен быть помещен в span или div и перемещен из области просмотра с помощью text-indent: -9999px; position: absolute;. Таким образом программы чтения с экрана будут по-прежнему читать текстовое содержимое своим пользователям (холст пока недоступен)

Answer 2

.tableClass th {

writing-mode: tb-rl;

filter: fliph() flipV();

}

Для кросс-браузерной реализации используйте jQuery.
Посмотрите на это ТАКОЕ обсуждение. Вертикальный текст внутри заголовков таблицы с использованием библиотеки SVG на основе JavaScript