Fieldset does not support display: table / table-c

Question

I'm trying to use display: table with fieldset, but it's not scaling properly. The same thing works if I change <fieldset> to <div>.

I tried with Safari and Firefox.

Am I missing something?

http://jsfiddle.net/r99H2/

Answer 1

The fieldset is an element with special behavior, so it is likely for this issue to occur.

Add another div wrapper inside your fieldset wrapper, and use the div. Change fieldset back to normal, or block.

<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 2

When you change the width of the fieldset, you are changing the size of the border of it. Its function is to group elements and draw a border around them. Its size doesn't affects the content inside it. So, follow this.

.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>

Answer 3

Basically, the default rendering of fieldset can't actually be expressed in CSS. As a result, browsers have to implement it in non-CSS terms, and that interferes with application of CSS to the element.

Pretty much any element that can't be recreated using pure CSS will have issues of that sort.