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

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

Таблиці дуже важко переносять зменшення розмірів екрану. Доводиться використовувати горизонтальне прокручування, щоб відобразити таблицю. І якщо це вирішує проблему з таблицями, проблема з заголовками таблиць залишається. Сьогодні ми навчимося робити вертикальні заголовки для таблиці, що дозволить розумно витрачати місце і відповідає стандартам оформлення таблиць для друкованих видань (якщо вам це важливо).

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

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

Зверніть увагу – всі класи взяті з Bootstrap. Ті дані, які потрібно повернути на 90 градусів, обернемо span з класом .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