Вертикальный текст в заголовках таблиц HTML + CSS

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

Таблицы очень тяжело переносят уменьшение размеров экрана. Приходится применять горизонтальную прокрутку, чтобы отобразить таблицу. И если это решает проблему с длинными таблицами, то проблема с заголовками таблиц остается. Сегодня мы научимся делать вертикальные заголовки для таблицы что позволит разумно расходовать место, и соответствует гостам оформления таблиц для печатных изданий (если вам это важно).

В любом случае, ни одна админ панель не обходится без табличных данных. Бизнес очень любит таблицы и навыки их верстки – очень важны для frontend разработчика.

Для проекта – создадим файл HTML и разместим в него таблицу с реальными данными. Я воспользовался структурой проекта Bootstrap.

Обратите внимание – все классы взяты из Bootstrap. Те данные, которые нужно развернуть на 90 градусов, обернем в .rotate-sm-90. Конечно же, название класса можно заменить на то, которое понравится вам. В принципе, вместо span можно применять любой тег, однако нам показалось логично применить именно span.

Теперь – перейдем в файл style.css и внесем стили для класса .rotate-sm-90.

.rotate-sm-90 {
    font-size: 1rem;
    writing-mode:vertical-lr;
}

Свойство writing-mode отвечает за то, как браузер должен отображать написание текста. Не забывайте, что существуют языки, которые пишутся справа налево и сверху вниз. Обратите внимание что у данного свойства много значений, но часть из них экспериментальные, а часть – устарели. И для вертикального выравнивания остается два свойства: vertical-lr и vertical-rl.

Оба эти свойства применяются и делают текст вертикальным, однако текст отображается сверху вниз, а нам нужно наоборот. Добавим трансформацию и получим нужный результат:

.rotate-sm-90 {
    font-size: 1rem;
    writing-mode:vertical-lr;
    transform: rotate(180deg);
}

Осталось дописать медиазапрос, чтобы на большом экране заголовки таблицы размещались горизонтально, а на мобильных устройствах текст в заголовке становился вертикальным:

@media (max-width: 768px) {
    .rotate-sm-90 {
      font-size: 1rem;
      writing-mode:vertical-lr;
      transform: rotate(180deg);
    }
}

И сравните результат на десктопе:

И на мобильном:

Прочитать про writing-mode: Mozilla Developer