it-swarm.com.ru

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

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

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

99
Victor

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

table-layout: fixed;
width: 100%;

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

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

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

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

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

197
canon

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

Word-break: break-all 

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

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

43
Jon Schneider

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

15
David Titarenco

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

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

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

1
usernaveen

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

0
Peter Lyons

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

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