Menu
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/
657
The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.
You should not use the <fieldset> and <legend> when: You have a single form field that asks for a single piece of information.
You can use any form elements outside of an actual form, since most of them can be used with JavaScript utilities outside the form. The form is only needed if you plan on allowing the user to submit the data with it.
The fieldset element can also contain nested fieldset elements. This is normally only required in complex forms, where there are subgroups of form elements inside larger groupings. In this example, a fieldset for your profile includes a nested fieldset for contact details.
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.
145
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
