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

Мне нужно показывать табличные данные с помощью 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>

ОТВЕТЫ

Ответ 1

Ниже я включаю некоторую разметку, которая проверяет HTML/CSS для достижения того, что, как я полагаю, вы хотите.

Существует стиль ячейки фиксированной ширины .fixedcell и стиль ячейки с изменяемой шириной .fluidcell. Я установил фиксированную ширину (75 пикселей в этом примере) просто для лучшей иллюстрации.

Жидкости шириной имеют width:auto, поэтому они заполняют ширину оставшегося табличного пространства; у них также важно есть white-space:nowrap, поэтому текст не расширяет ячейку по высоте (white-space:pre тоже работает); и, наконец, у них есть overflow:hidden, поэтому текст не переполняет ширину и не делает вещи уродливыми; в качестве альтернативы вы можете установить overflow: scroll, чтобы в этих ячейках была полоса прокрутки, когда/при необходимости.

Таблица установлена на 100% ширины, поэтому она будет расширяться, чтобы соответствовать экрану/и т.д. По мере необходимости. И важная вещь в отношении стиля таблицы - это table-layout:fixed, это заставляет таблицу придерживаться макета страницы, а не автоматически измерять ее размер на основе собственного содержимого (table-layout:auto).

Я также добавил некоторые границы, чтобы проиллюстрировать границы таблицы и ячеек.

<html>
<head>
    <title>Table with auto-width sizing and overflow hiding.</title>
    <style type="text/css">
        table {width:100%; border:solid 1px red; table-layout:fixed;}
        table td {border:solid 1px green;}
        .fixedcell {width:75px;}
        .fluidcell {width:auto; overflow:hidden; white-space:nowrap;}
    </style>
</head>
<body>
    Table with one fluid column:
    <table>
        <tr>
            <td class="fixedcell">row 1</td>
            <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
            <td class="fixedcell">fixie</td>
            <td class="fixedcell">another</td>
        </tr>
    </table>

    Table with two fluid columns:
    <table>
        <tr>
            <td class="fixedcell">row 1</td>
            <td class="fluidcell">a whole bunch of content could go here and it still needs to fit nice into the cell without mucking things up</td>
            <td class="fluidcell">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td>
            <td class="fixedcell">fixie</td>
            <td class="fixedcell">another</td>
        </tr>
    </table>
</body>
</html>