Fieldset не поддерживает отображение: таблица / таблица-ячейка

Question

Я пытаюсь использовать display: table с набором полей, но это неправильно масштабируется.То же самое работает, если я изменяю <fieldset> на <div>.

Я пробовал с Safari и Firefox.

Я что-то упустил?

http://jsfiddle.net/r99H2/

Answer 1

По существу, рендеринг поля по умолчанию на самом деле не может быть выражен в CSS.В результате браузеры должны реализовывать его в не-CSS терминах, и это мешает применению CSS к элементу.

Практически любой элемент, который невозможно воссоздать с использованием чистого CSS, будет иметьсортировки.

Answer 2

Fieldset - это элемент со специальным поведением, поэтому вполне вероятно, что эта проблема возникнет.

Добавьте еще одну оболочку div в свою оболочку fieldset и используйте div.Измените набор полей обратно на нормальный или заблокируйте.

<fieldset style="background: pink; width: 100%">
    <div style="display: table; width: 100%">
        <div style="display: table-cell; background: red; width: 33%">a</div>
        <div style="display: table-cell; background: green; width: 33%">b</div>
        <div style="display: table-cell; background: blue; width: 33%">c</div>
    </div>
</fieldset>

Answer 3

Когда вы изменяете ширину fieldset, вы меняете size border.Его функция - группировать элементы и рисовать границы вокруг них.Его размер не влияет на содержимое внутри него.Итак, следуйте этому.

.fieldset {
display: table;
padding:0;
border:none;
}
.div {
display:table-cell;
border: 1px solid black;
width:calc(100vw * 1/3);
}

<fieldset class="fieldset">
<div class="div">1</div>
<div class="div">2</div>
<div class="div">3</div>
</fieldset>