Как мне ограничить ширину таблицы до содержащий элемент (или экран)?

Мне нужно отображать табличные данные с помощью таблицы , но они будут в пределах плавный макет; Я хочу, чтобы он заполнял всю доступную ширину, но не расширялся по горизонтали за пределы максимальной ширины экрана, чтобы тело не получало горизонтальной полосы прокрутки. Вместо этого слишком широкие элементы td получат полосу прокрутки.

В примере есть ДАННЫЕ в таблице , таблица имеет границу: сплошной черный 1 пиксель , а результат должен быть для легкого синтаксического анализа при передаче из curl (отсюда white-space: pre ); div - это просто обычный помощник по макету CSS, если возможно, давайте избавимся и от него!

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

В Chrome , с помощью чего-то, что я считаю злым хакерским приемом, я должен поддерживать максимальную ширину таблицы и отображать полосы прокрутки на td при необходимости. Однако это не работает для FF, и это решение не может считаться правильным.

Следующий пример этого можно найти на https://hydra.geht.net/table-quirx.html на некоторое время:

 .nw {пробел: nowrap} .quirx div {ширина: 100%; максимальная ширина: 100%; белое пространство: предварительно} .quirx td {максимальная ширина: 90 пикселей; граница: сплошной черный 1px} .quirx td + td {max-width: 500px; переполнение: авто} table.quirx {ширина: 100%; максимальная ширина: 100%; граница: сплошной черный 1px; граница-коллапс: коллапс} тд {выравнивание: слева; max-width: 100%} 

   
 Немного информации 
KEY
 
 ДАННЫЕ (которые могут содержать длинные строки в формате PRE) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX / td> 
 

Обратите внимание, что "colspan = 3" здесь не является ошибкой, в моем приложении иногда может отображаться третий столбец, это не может быть известно в то время, когда Выводится заголовок таблицы . (Некоторые элементы стиля тоже излишни.)

Приведенный выше трюк заключается в следующем: что td max-width вместе меньше обычного экрана ( 590px ), а таблица затем растягивается до учитывая ширину , что составляет 100%. Поскольку td s не выходят за пределы экрана, внутреннее свойство overflow внутреннего div может работать должным образом. Однако в FF это не работает ни с width , ни с max-width (что, вероятно, связано с их inline -status). В Chrome параметр width: 100% или аналогичный не работает ни с элементами td , ни с элементами tr . ширина должна автоматически следовать (без JavaScript)

Я действительно понятия не имею, как это заархивировать. Возможно, это часто задаваемые вопросы, но я сам не смог найти решение.