У меня возникают проблемы с таблицей html, которая переполняет ее родительский контейнер. У меня есть установка пример jsfiddle здесь, чтобы проиллюстрировать проблему.
Как я могу заставить текст заголовка и текст ячейки таблицы обернуться так, чтобы он соответствовал его контейнеру? Я бы предпочел только метод CSS, но я также открыт для использования Javascript (или jQuery), если это абсолютно необходимо.
С точки зрения "сделай так, чтобы он подходил под div", добавь в класс таблицы следующее (jsfiddle):
table-layout: fixed;
width: 100%;
Установите желаемую ширину столбца; в противном случае алгоритм фиксированной разметки будет равномерно распределять ширину таблицы по столбцам.
Для краткости, вот алгоритмы разметки таблиц, выделение мое:
При таком (быстром) алгоритме горизонтальное расположение таблицы не зависит от содержимого ячеек; это зависит только от ширины таблицы, ширины столбцов и границ или расстояния между ячейками.
В этом алгоритме (который обычно требует не более двух проходов) ширина таблицы задается шириной ее столбцов [как определяется содержимым] (и промежуточными границами).
[...] Этот алгоритм может быть неэффективным, поскольку он требует, чтобы пользовательский агент имел доступ ко всему содержимому таблицы до определения окончательного макета, и может потребовать более одного прохода.
Перейдите к исходной документации, чтобы увидеть особенности каждого алгоритма.
Попробуйте добавить
word-break: break-all
в CSS для вашего элемента таблицы.
Это приведет к тому, что слова в ячейках таблицы будут разбиты так, что таблица не будет расширяться, чем ее содержащий div, но столбцы таблицы все еще имеют динамический размер. jsfiddle demo.
Добавьте display: block; и overflow: auto; в .my-table. Это просто отключит что-либо за пределами префикса 280px, который вы соблюдаете. Нет никакого способа сделать это "красивым" с этим требованием из-за таких слов, как pélagosthrough, которые больше, чем 280px.
Попробуйте добавить к td:
display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify
переполненные tds будут совпадать с новой строкой.
Ну, учитывая ваши ограничения, я думаю, что установка overflow: scroll; в div .page, вероятно, является вашим единственным вариантом. 280 px довольно узкий, и, учитывая размер шрифта, обертка слов сама по себе не собирается этого делать. Некоторые слова просто длинны и не могут быть обернуты. Вы можете резко уменьшить размер шрифта или перейти с переполнением: прокрутка.
обновите ваш CSS следующим образом: это должно исправить
.page {
width: 280px;
border:solid 1px blue;
overflow-x: auto;
}