100% ширина таблицы переполнения контейнера div

У меня возникают проблемы с таблицей html, которая переполняет ее родительский контейнер. У меня есть установка пример jsfiddle здесь, чтобы проиллюстрировать проблему.

Как я могу заставить текст заголовка и текст ячейки таблицы обернуться так, чтобы он соответствовал его контейнеру? Я бы предпочел только метод CSS, но я также открыт для использования Javascript (или jQuery), если это абсолютно необходимо.

Ответы

Ответ 1

С точки зрения "сделай так, чтобы он подходил под div", добавь в класс таблицы следующее (jsfiddle):

table-layout: fixed;
width: 100%;

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

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

  • Исправлено (источник)
    При таком (быстром) алгоритме горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины таблицы, ширины столбцов и границ или расстояния между ячейками.
  • Автоматический (источник)
    В этом алгоритме (который обычно требует не более двух проходов) ширина таблицы задается шириной ее столбцов [как определяется содержимым] (и промежуточными границами).

    [...] Этот алгоритм может быть неэффективным, поскольку он требует, чтобы пользовательский агент имел доступ ко всему содержимому таблицы до определения окончательного макета, и может потребовать более одного прохода.

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

Ответ 2

Попробуйте добавить

word-break: break-all

в CSS для вашего элемента таблицы.

Это приведет к тому, что слова в ячейках таблицы будут разбиты так, что таблица не будет расширяться, чем ее содержащий div, но столбцы таблицы все еще имеют динамический размер. jsfiddle demo.

Ответ 3

Добавьте display: block; и overflow: auto; в .my-table. Это просто отключит что-либо за пределами префикса 280px, который вы соблюдаете. Нет никакого способа сделать это "красивым" с этим требованием из-за таких слов, как pélagosthrough, которые больше, чем 280px.

Ответ 4

Попробуйте добавить к td:

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

переполненные tds будут совпадать с новой строкой.

Ответ 5

Ну, учитывая ваши ограничения, я думаю, что установка overflow: scroll; в div .page, вероятно, является вашим единственным вариантом. 280 px довольно узкий, и, учитывая размер шрифта, обертка слов сама по себе не собирается этого делать. Некоторые слова просто длинны и не могут быть обернуты. Вы можете резко уменьшить размер шрифта или перейти с переполнением: прокрутка.

Ответ 6

обновите ваш CSS следующим образом: это должно исправить

.page {
    width: 280px;
    border:solid 1px blue;
    overflow-x: auto;
}