табличная ячейка выглядит как игнорирующая фиксированная ширина

Question

табличная ячейка выглядит как игнорирующая фиксированная ширина

0

мое строительство:

<div style="display: table;">
    <div style="display: table-cell; width: 50px; background-color: red;">a</div>
    <div style="display: table-cell; width: 100%; background-color: green;">...</div>
    <div style="display: table-cell; width: 50px; background-color: red;">a</div>
</div>

http://jsfiddle.net/5PgzT/

краевые столбцы должны оставаться на 50 пикселей шириной, все равно это похоже на то, что я ничего не установил

John Smith 20 фев. 2014, в 18:14

Источник

0

Почему бы просто не использовать стол?
Phil 20 фев. 2014, в 16:21

Теги:

html

css

2 ответа

2

То, что происходит здесь, является центральной табличной ячейкой, которая растягивается до 100% неопределенного значения. Попробуйте дать таблице ширину и позволить центральной ячейке сортировать себя, а не определять:

<div style="display:table; width:400px;">
    <div style="display:table-cell; width:50px; background-color: red;">&nbsp;</div>
    <div style="display:table-cell; background-color: green; width:auto;">content</div>
    <div style="display:table-cell; width:50px; background-color: red;">&nbsp;</div>
</div>

pmcneil18 20 фев. 2014, в 14:37

Ещё вопросы

Почему бы просто не использовать стол?

Hashem Qolami · Accepted Answer · 2014-02-20T14-45-00.000Z

Во-первых, родительский <div> не имеет явной width Также вам, вероятно, понадобится использовать table-layout: fixed; также:

<div style="display: table; width: 100%; table-layout: fixed;">
    <div style="display: table-cell; width: 50px; background-color: red;">a</div>
    <div style="display: table-cell; width: 100%; background-color: green;">...</div>
    <div style="display: table-cell; width: 50px; background-color: red;">a</div>
</div>

РАБОЧАЯ ДЕМО

Или (менее элегантное решение) вы можете использовать min-width:50px вместо