Мне нужно показывать табличные данные с помощью table
, но это будет в рамках разметки; Я хочу, чтобы он заполнял всю доступную ширину, но не расширялся горизонтально за пределы максимальной ширины экрана, чтобы body
не получал горизонтальную полосу прокрутки. Вместо этого слишком широкие элементы td
должны получить полосу прокрутки.
В примере есть DATA
в table
, у table
есть border:1px solid black
, и вывод должен быть для легкого разбора, когда он также передается по pipeопроводу (например, white-space:pre
); div
- это обычный помощник по макетированию CSS, если возможно, давайте избавимся и от этого!
Важным моментом является то, что это не должен быть тип макета с фиксированной шириной пикселя, а table
должен быть меньше доступной ширины в случае, если данным не нужно много места. Таким образом, чтобы подвести итог, простая таблица, которая просто не становится шире, чем экран. В идеале table
будет растягивать родительский элемент только до тех пор, пока max-width
этого включающего элемента не будет достигнут, а затем не станет шире.
В Chrome
, с чем-то, что я считаю злым взломом, мне удалось удерживать table
на максимально доступной ширине и отображать полосы прокрутки на td
при необходимости. Однако это не работает для FF, и это не то решение, которое можно считать правильным.
Следующий пример этого можно найти в https://hydra.geht.net/table-quirx.html некоторое время:
.nw { white-space:nowrap }
.quirx div { width:100%; max-width:100%; white-space:pre }
.quirx td { max-width:90px; border:1px solid black }
.quirx td+td { max-width:500px; overflow:auto }
table.quirx { width:100%; max-width:100%; border:1px solid black; border-collapse:collapse }
td { align:left; max-width:100% }
<head>
<title>Obey max-width for table</title>
</head>
<body>
<table summary="" class="quirx"><tr><td colspan="3">
Just some info
</td></tr><tr><td>KEY</td><td><div>DATA (which might contain long lines PRE formatted) XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX </div>
</td></tr></table>
</body>