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

Я хочу, чтобы таблица имела ширину 100%, но только один столбец из нее должен иметь свободную ширину, например:

| A | B | C                                                                  |

поэтому ширина столбцов A и B должна соответствовать ширине их содержимого, но ширина столбцов C должна продолжаться до конца таблицы.

Хорошо, я мог бы указать ширину A и B в пикселях, но проблема в том, что ширина содержимого этих столбцов не фиксирована, поэтому, если я установлю фиксированную ширину, она не будет полностью соответствовать содержимому :(

PS: я использую не фактические элементы таблицы, а список DL, завернутый в div. Div имеет display: table, dl имеет display: table-row и dt / dd display: table-cell ...


html css css-tables
person thelolcat    schedule 29.12.2012    source источник
comment
Являются ли данные, которые у вас есть, табличными? В таком случае у вас нет причин не использовать таблицы.   -  person Jawad    schedule 29.12.2012
comment
но то же самое происходит, если я использую разметку таблицы ..   -  person thelolcat    schedule 29.12.2012
comment
Связано: stackoverflow.com/questions / 4582631 /   -  person Timo Huovinen    schedule 07.04.2014

Ответы (1)


arrow_upward
26
arrow_downward

Если я вас понял, у вас есть табличные данные, но вы хотите представить их в браузере с помощью элементов div (таблицы AFAIK и div с display: table в основном ведут себя одинаково).

(вот рабочий jsfiddle: http://jsfiddle.net/roimergarcia/CWKRA/)

Разметка:

<div class='theTable'>
    <div class='theRow'>
        <div class='theCell' >first</div>
        <div class='theCell' >test</div>
        <div class='theCell bigCell'>this is long</div>
    </div>
    <div class='theRow'>
        <div class='theCell'>2nd</div>
        <div class='theCell'>more test</div>
        <div class='theCell'>it is still long</div>
    </div>
</div>​

И CSS:

.theTable{
    display:table; 
    width:95%; /* or whatever width for your table*/
}
.theRow{display:table-row}
.theCell{
    display:table-cell;
    padding: 0px 2px; /* just some padding, if needed*/
    white-space: pre; /* this will avoid line breaks*/
}
.bigCell{
    width:100%; /* this will shrink other cells */
}​

Печально то, что я не мог этого сделать год назад, когда мне это действительно было нужно -_-!

person Roimer    schedule 29.12.2012
comment
Обратите внимание, что добавление table-layout:fixed к основному div нарушит этот css. - person Roimer; 29.12.2012
comment
white-space: nowrap может быть лучше. Если у вас есть список ul, встроенный в ячейку, опция pre заставляет складываться - по крайней мере, в реальном теге таблицы. - person cyberwombat; 14.04.2015
comment
Что делать, если вам нужно разбить одну ячейку на несколько строк? Как вы примените свое решение к этому? - person Rares Oltean; 15.05.2015