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

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

Для установки вертикального расположения текста примените к div внутри ячейки таблицы CSS-свойство transform: rotate(-90deg);.

<td><div style="transform: rotate(-90deg); white-space: nowrap;">Вертикальный текст</div></td>

С помощью transform: rotate(-90deg); текст поворачивается на 90 градусов против часовой стрелки, что особенно удобно для узких столбцов заголовков. Свойство white-space: nowrap; предотвращает перенос текста, позволяя ему сохраняться в одной строке.

Добавьте вендорные префиксы для обеспечения наилучшей совместимости:

.box_rotate {
  -webkit-transform: rotate(-90deg); /* Для Safari */
  -ms-transform: rotate(-90deg);     /* Для IE 9 */
  transform: rotate(-90deg);         /* Для прочих браузеров */
}

Чтобы применить эти стили, назначьте класс .box_rotate соответствующим div.

<td>
  <div class="box_rotate">Вертикальный текст</div>
</td>

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

Применение поворота к тексту заголовков

Для поворота текста заголовков применяется уже упомянутый класс .box_rotate.

<th>
  <div class="box_rotate" aria-label="Вертикальный текст заголовка">
    Текст заголовка
  </div>
</th>

Управление длинным текстом

При работе с длинными словами возможны следующие варианты:

• Применение сокращений: иногда можно передать суть с помощью части слова или аббревиатуры.
• Уменьшение шрифта: иногда требуется уменьшить шрифт, чтобы текст поместился в указанном пространстве.
• Корректировка угла поворота: если подходят углы в -45 или -60 градусов, используйте эти настройки, чтобы сбалансировать читабельность и внешний вид.

Фокус на доступности

Создайте HTML таким образом, чтобы он был доступен для вспомогательных технологий и программ для чтения с экрана.

<th>
  <div class="box_rotate" aria-label="Описание для экранных читалок">
    Аббревиатура
  </div>
</th>

Качественное оформление визуально привлекательно и способствует передаче смысла.

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

Демонстрация преобразования стандартного горизонтального расположения текста в вертикальное:

До поворота:    | Содержимое |
                 |------------|
                 | Вещи       |

После поворота: ┌─────┐
                 | С   |
                 | о   |
                 | д   |
                 | е   |
                 | р   |
                 | ж   |
                 | и   |
                 └─────┘

Таким образом, мы движемся вверх по вертикали, следуя за каждой буквой текста.

Адаптация для мобильных устройств

Дизайн должен быть максимально адаптирован для удобства использования на маленьких экранах.

• Медиа-запросы: применяйте поворот текста только там, где это уместно, например, на больших экранах.
• Резиновые размеры: адаптируйте свойства элементов под различные размеры экранов.

@media (min-width: 768px) {
    .box_rotate {
        transform: rotate(-90deg); /* Поворот текста на экранах шире 768px */
    }
}

Профилактика и решение проблем

Ниже представлены советы по решению типичных проблем при стилизации текста.

• Выравнивание: если текст не выглядит правильно, отрегулируйте его с помощью свойств text-align и vertical-align.
• Перекрытие: если элементы начинают перекрывать друг друга, попробуйте увеличить отступы вокруг текста или уменьшить размер шрифта.
• Стиль ховера: контролируйте эффекты при наведении курсора, чтобы они не вызывали нежелательные изменения в отображении повернутых элементов.

Проводите тестирование изменений, чтобы убедиться, что функциональность и визуальное оформление согласуются между собой.

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

1. transform – CSS: Каскадные таблицы стилей | MDN — детально рассматривает свойство transform на MDN.
2. Свойство CSS transform — W3Schools объясняет основы работы со свойством transform.
3. Flask – POST Error 405 Method Not Allowed – Stack Overflow — обсуждение проблемы и возможные решения на Stack Overflow.
4. "transform" | Can I use... Support tables for HTML5, CSS3, etc — информация о совместимости свойства transform в различных браузерах.
5. Адаптивные повернутые заголовки таблиц с использованием CSS — пример на CodePen, демонстрирующий адаптивные заголовки.
6. Повернутые заголовки таблиц с использованием CSS-переходов — еще один пример на CodePen, показывающий применение CSS-переходов.