Как повернуть текст на 90 градусов в HTML-таблице: reflow

Быстрый ответ

Хотите разнообразить обычную HTML-таблицу нестандартным расположением текста? CSS и его свойства transform: rotate(-90deg), transform-origin: bottom left и white-space: nowrap помогут в этом. Таким образом вы сможете сделать текст вертикальным, и ячейка таблицы примет соответствующие размеры. Пример:

<td>
  <div style="transform: rotate(-90deg); white-space: nowrap; transform-origin: bottom left;">
    🔄 Повернутый текст
  </div>
</td>

Примечание: Свойства CSS transform: rotate(-90deg) и transform-origin: bottom left обеспечивают поворот вашего текста вокруг нижнего левого угла, сохраняя его положение в ячейке без изменений.

Работаем с размерами текста

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

Вертикальные заголовки

Повернутые на 90 градусов заголовки таблиц выглядят очень эффектно. Чтобы добиться этого, используйте элементы <th> и <span> с применением CSS-свойств transform: rotate(-90deg) и white-space: nowrap.

<th>
  <span style="display: block; transform: rotate(-90deg); white-space: nowrap;">
    Текст-модель 🕺🏻
  </span>
</th>

JavaScript пригодится для подбора ширины ячейки под длину вертикального заголовка.

Подробнее об этом расскажет наш спикер на видео

Совместимость с браузерами

Чтобы поворот текста работал во всех браузерах, используйте вендорные префиксы для свойства transform. К тому же, writing-mode может служить альтернативой для вертикального отображения текста, хоть и несколько отлиается от transform.

//шутка с Reddit: "Почему программисты предпочитают iOS? Потому что в нем нет Windows или Android, от которых хотят убежать, когда код не работает!"

Рекомендации по стилизации текста при вращении

Планируете использовать свои собственные вариации повернутого текста? Вот некоторые советы для достижения эффективных и красивых результатов:

• Играйте с отрицательными полями для точного выравнивания.
• Убирайте или меняйте стили границ ячеек для достижения гармонии.
• Применяйте стили через CSS-классы, чтобы сохранять порядок в коде.

Визуализация

Представьте, как сильно меняется обычная таблица, когда текст в ней поворачивается на 90 градусов. Такой текст читается сверху вниз:

До: Читаем слева направо.
После: 🔄 Теперь читаем сверху вниз.

Принцип работы с поворотами текста станет более понятен, если представить его визуально. Вот наглядная демонстрация с использованием эмодзи:

Поворот текста:
До 📖 -> После 🔄📖
Текст, словно, сделал переворот!

Готовы ли вы выровнять все правильно?

После того как ваш текст "сделает переворот", следует позаботиться об его правильном выравнивании. Благодаря vertical-align: middle и text-align: center, текст после поворота будет расположен идеально.

Внедряем поворот в массовом масштабе

Если вам нужно повернуть множество элементов, оптимальным решением будет создание CSS-класса. Это позволит обеспечить единый стиль и упростит управление.

//еще одна шутка с Reddit: "Почему программистам не нравится природа? Из-за багов!"

.cssMilitaryDrill {
  transform: rotate(-90deg);
  transform-origin: bottom left;
  white-space: nowrap;
}

Применяя этот класс, ваши HTML-элементы будут выстроены, как на военном параде:

<td>
  <div class="cssMilitaryDrill">Смирно! 🔄 Салют! 🙋‍♂️</div>
</td>

Блокироем переполнение: не позволяйте тексту "выходить за рамки"

Следите за переполнением контента и адаптивностью заголовков, чтобы они не "выбивались" из общего вида таблицы.

Полезные материалы

1. transform – CSS: Cascading Style Sheets | MDN — Основа трансформаций в CSS.
2. rotate() – CSS: Cascading Style Sheets | MDN — Метод для поворота текста.
3. HTML Tables – W3Schools — Небольшое руководство по работе с таблицами.
4. Responsive Data Tables | CSS-Tricks – CSS-Tricks — Советы по созданию адаптивных таблиц.
5. CSS Writing Modes Level 3 – W3C — Обзор способов записи в CSS.
6. Centering in CSS: A Complete Guide | CSS-Tricks – CSS-Tricks — Рекомендации по центрированию элементов в коде.
7. HTML Styles CSS – W3Schools — Основные правила присвоения стилей в HTML.