Когда мы отображаем таблицы, для экономии места в шапке и сохранения минимальной ширины колонок можно использовать вертикальное отображение текста. Наверное, каждый из нас встречал бумажные таблицы, в которых текст в шапке был написан как бы снизу вверх (кстати, при вертикальном расположении правильно именно так, а не сверху вниз). В вебе тоже можно делать такие трюки, причем, для этого есть стандартные свойства CSS.
Казалось бы, на первый взгляд проблема может показаться не очень актуальной, но если вспомнить о носителях азиатской культуры, у которых иероглифы традиционно могут писаться вертикально, сомнения об актуальности развеятся. Для примера, японское правительство предлагает гранты на решение проблем с вертикальным отображением текста.
Для создания вертикального текста сейчас используется свойство CSS для поворота:
th {
transform: rotate(-90deg);
}
Здесь в скобках указан градус, на который осуществляется поворот. Также можно указать точку, относительно которой необходимо поворачивать:
th {
transform-origin: 50% 50%;
}
Здесь в качестве процентов указывается относительная позиция той точки, вокруг которой будет произведено вращение. 50% используется по умолчанию, это середина. Первое число — координата по X, второе — по Y. Если требуется вращать относительно левой стороны блока, надо указать 0% 50%, правой — 100% 50%, аналогично с верхом и низом. Вместо процентов можно использовать ключевые слова left, right, top, bottom. Однако, обычных значений по умолчанию почти всегда бывает достаточно.
Ниже приведен пример, как сделать вертикальный текст в шапке таблицы:
Обратите внимание на браузерные приставки к transform, они пока нужны для совместимости. Также, если внимательно посмотреть на CSS примера, может возникнуть вопрос: зачем еще какой-то код? Все дело в том, что при повороте на прямой угол ширина как бы становится высотой, а высота — шириной, и блоки шапки таблицы становятся излишне широкими, особенно при длинном тексте. Чтобы избежать этого, введены хаки с дополнительными блоками p, псевдоклассом before и режимом table-layout:fixed у таблицы.