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

Question

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

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

Answer 1

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

table-layout: fixed;
width: 100%;

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

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

• Fixed (source )

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

• Автоматически ( источник )

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

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

Answer 2

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

word-break: break-all 

к CSS на элементе таблицы.

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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

Answer 6

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