Обертка текста в теге <td> с шириной 15%: решение

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

Для того чтобы текст внутри <td> вписывался в размеры ячейки, используйте CSS-свойство white-space со значением normal. Вот пример:

<td style="white-space: normal;">Текст помещён в пределах ячейки.</td>

Или примените CSS-класс для реализации более оптимального и переиспользуемого решения:

.text-in-bounds { white-space: normal; }

<td class="text-in-bounds">Текст помещён в пределах ячейки.</td>

Вдобавок можно использовать адаптивный дизайн через медиа-запросы, применить флексбокс или грид-систему и улучшить функционал таблиц за счёт сортировки и фильтрации. Давайте углубимся в эту тему.

Не просто обтекание: продвинутые методы работы с текстом

Адаптивность с использованием медиа-запросов

Мир полон дисплеев разных размеров, и медиа-запросы помогают сделать дизайн адаптивным, обеспечивая визуальную гармоничность:

@media screen and (max-width: 600px) {
  .text-in-bounds {
    white-space: pre-wrap; /* Учтём меньшие экраны! */
  }
}

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

Флексбокс и грид: искусство компоновки

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

.flex-table {
  display: flex;
  flex-direction: column; /* Ячейкам теперь комфортно */
}

Сортировка и фильтрация: поддерживаем порядок в данных

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

function sortByColumn(column) {
  // Здесь совершается магия сортировки
}

function filterData(criteria) {
  // Игра в прятки с данными завершена!
}

Условное форматирование: выделяем ключевое

Применение условного форматирования поможет выделить важную информацию и улучшить её визуальное восприятие в таблице:

td.important {
  background-color: yellow; /* Время засиять */
}

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

Показательно представим, как обтекание текста работает в <td>, используя знак книжки 📚. Без применения стилей они будут расположены хаотично как текст, выходящий за границы:

До:      📚📚📚📚📚📚📚📚 (Внимание! Книжный беспорядок!)

После применения стилей они аккуратно уложатся в стопки:

После:   📚📚📚
          📚📚📚
          📚📚   (Книги теперь на месте)

td {
  word-wrap: break-word; /* Расслабьтесь. А вы, книги, становитесь ровно! */
  max-width: 100px;     /* Новый режим: ограничение в 100 пикселей */
}

Теперь никакие значки не страдают.

От беспорядка к порядку: дополнительные пути организации содержимого <td>

Фиксированный макет таблицы для стабильности

Если вам требуется зафиксировать ширину колонок в таблице, используйте table-layout: fixed;:

table {
  table-layout: fixed;
  width: 100%; /* Место найдётся всем */
}

td {
  width: 15%; /* Ты здесь, не уйдёшь */
}

Слишком много текста – некрасиво

Если текста в ячейке слишком много, примените word-break: break-all;, чтобы его правильно распределить:

td {
  word-break: break-all; /* Для каждой буквы найдётся место */
}

Размер экрана имеет значение: адаптивные таблицы

Почему бы не учесть разные размеры экранов и соответственно подстроить ширину <td> и обтекание текста с помощью медиа-запросов:

@media screen and (max-width: 768px) {
  td {
    width: auto; /* Гибкость, твоё имя – auto */
  }
}

Границы для формирования структуры

Задавайте максимальную ширину для сохранения контролируемого макета:

td {
  max-width: 120px; /* Не превышай 120 пикселей */
}

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

Если приходится работать с устаревшими браузерами, нет причин беспокоиться, используйте хаки для max-width и ручные вычисления ширины ячеек:

table {
  width: 600px; /* Фиксированная ширина обеспечит стабильность */
}
td {
  max-width: 150px; /* Продержимся даже под IE */
}

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

1. Текстовые эффекты в CSS — от W3schools: ваш надёжный гид по стилистики текста в CSS.
2. Работа с длинными словами и URL — от CSS-Tricks: советы по предотвращению переполнения текстом.
3. Элемент таблицы — подробности о HTML <table> от MDN.
4. line-clamp — гайд от CSS-Tricks, рассказывающий о многострочном обрезании текста.
5. Элемент ячейки данных таблицы — обширная информация об элементе HTML <td>, также от MDN.
6. Overflow-wrap в CSS — изящное объяснение CSS-свойства overflow-wrap от MDN.