Ширина таблицы зависит от ячеек таблицы, но не от родителей

Когда у меня есть таблица внутри div, и если ширина таблицы больше, чем div, таблица автоматически изменит размер всех своих ячеек, чтобы соответствовать, даже если ячейки имеют явно установленную ширину.

У меня есть эта скрипка для демонстрации. Обратите внимание, что ячейки таблицы имеют ширину 900 пикселей, определенную в CSS, но таблица по-прежнему сжимает их, чтобы они соответствовали ширине своего родителя.

Но мой желаемый эффект состоит в том, чтобы позволить ширине таблицы зависеть только от ширины ячеек таблицы (в то же время иметь минимальную ширину для заполнения родителя), но все же содержаться внутри родителя с overflow: scroll, поэтому таблица будет переполняться и пользователь может прокручивать.

Итак, вкратце: контейнер имеет фиксированную ширину, таблица имеет динамическую ширину в зависимости от ширины ячеек таблицы.


html css css-tables
person Xavier_Ex    schedule 28.01.2014    source источник
comment
Вы можете указать ширину таблицы в css (но тогда вам, конечно, придется перенастраивать ее каждый раз, когда изменяется ширина какой-либо ячейки).   -  person Cthulhu    schedule 28.01.2014
comment
@Cthulhu да, я знаю об этом ... но это неоптимальное решение, так как мне все еще нужно, чтобы таблица имела фиксированную ширину, просто обновленную вручную; (   -  person Xavier_Ex    schedule 28.01.2014

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, это то, что вам нужно:

table { 
    border-collapse:separate; 
    border-top: 3px solid grey;
    min-width: 100%;
}

Этот...

  • Делает таблицу шириной контейнера
  • Позволяет таблице расширяться до размера, превышающего размер контейнера
  • Приводит к полосам прокрутки, если ширина больше ширины контейнера.

Это не заставляет ячейки быть 900px, несмотря на то, что у них нет содержимого, вы можете принудительно сделать это, обернув содержимое ячейки в элемент с минимальной шириной:

<div class="container">
    <table>
        <tr>
            <td class="headcol">1</td>
            <td class="long">ZOMG</td>
            <td class="long"><div>ZOMG</div></td>
        </tr>
    </table>
</div>

CSS

table { 
    border-collapse:separate; 
    border-top: 3px solid grey;
    table-layout: fixed;
}

td {
    margin:0;
    border:3px solid grey; 
    border-top-width:0px; 
    white-space:nowrap;
}

.container { 
    width: 600px; 
    overflow-x:scroll;  
    overflow-y:visible;
    border: 1px solid red;
    padding: 10px;
}

.long { 
    background:yellow; 
    letter-spacing:1em; 
    display: 
}

.long div {
    min-width: 900px;   
}
person Fenton    schedule 28.01.2014
comment
Таким образом, хитрость заключается в том, чтобы установить ширину содержимого (поэтому потенциально может потребоваться дополнительная оболочка...), а не ширину ячейки таблицы напрямую. Аккуратный! - person Xavier_Ex; 28.01.2014