Fieldset does not support display: table / table-cell

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/

Seems to be working perfectly fine to me, but you should probably have an element with `display: table-row` inside the fieldset and containing the cells. — Niet the Dark Absol, Feb 09 '12 at 00:56
It works in IE8/IE9, Opera. It doesn't work in even Chrome canary or Firefox nightly. — thirtydot, Feb 09 '12 at 01:00

score 16 · Accepted Answer · answered Feb 10 '12 at 05:56

16

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.

answered Feb 10 '12 at 05:56

Boris Zbarsky

34,758
5
52
55

1

+1 Now this makes sense to me: http://stackoverflow.com/questions/6481944/why-do-fieldsets-clear-floats – BoltClock Feb 10 '12 at 06:20
"the default rendering of fieldset can't actually be expressed in CSS" Do you have a source for this? The entire point of CSS is to style....so unachievable styling for a basic element....it's surprising. – Paul Draper Mar 30 '18 at 20:16
@Paul Draper: Boris works on Firefox's implementation of fieldset, among other things, and you'll find that the same holds true for all browsers. And, despite its unassuming appearance, fieldset is *not* a basic element. It's a form element, and like most other form elements it has special rendering properties (the general term, not the CSS term) with plumbing written in a way that simply cannot (easily) be overridden with CSS. – BoltClock Mar 31 '18 at 04:36
@PaulDraper fieldset has three main weird things going on: the legend positioning (it's pulled out of normal flow even though it doesn't have any strange display or position styling on it), the way the border is painted around the legend, and its block-formatting-context-by-default thing. Of those, the one that most seriously interferes with making it a table is the legend layout bit. Since that's not done in terms of CSS (and in fact is not doable in terms of CSS even now; _certainly_ not for position:static), how it should interact with CSS changes to the layout model is undefined at best. – Boris Zbarsky Mar 31 '18 at 07:38

score 4 · Answer 2 · answered Feb 09 '12 at 00:59

4

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>

answered Feb 09 '12 at 00:59

Ryan Briscall

121
5

1

That does work, but is there a resource listing which elements have that special behavior ? – romaninsh Feb 09 '12 at 04:21
You'll have to find it in the respective HTML specs, but I'm not sure if there's a quick-reference list around. – BoltClock Feb 10 '12 at 06:19

score 0 · Answer 3 · answered Mar 31 '18 at 04:29

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>

Fieldset does not support display: table / table-cell

3 Answers3

Linked

Related