Fieldset Does Not Support Display: Table/Table-Cell

Fieldset does not support display: table / table-cell

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.

Applying `display: table` and `display: table-cell` to fieldset not working in Chrome / IE Edge

In Firefox this code renders Test and Test2 side-by-side, but in Chrome and IE Edge they are stacked. Which is correct?

Based on these facts:

• the row has a width: 100%,
• there are two table cells, each with width: 50%,
• the box model is set to box-sizing: border-box, and
• margin spacing is set to 0

...it would appear that Firefox renders the layout correctly. Firefox aligns the table cells on the same row but Chrome wraps them onto two rows.

Except that fieldset is a special type of element.

fieldset doesn't accept changes to its display value like most other HTML elements. In fact, specifying display: table, display: table-cell or even display: flex to fieldset, will render elements unpredictably and unreliably.

And how can I make them side-by-side as in Firefox.

If you want to alter display values, you'll need to use elements other than fieldset or nest div / span elements as containers within fieldset.

For more details and workarounds see here:

• Fieldset does not support display: table / table-cell
• Arranging fieldset elements like a typical table-design
• Default CSS values for a fieldset <legend>
• Why do <fieldset>s clear floats?
• Bug 949476 - CSS display property flex does not work on fieldset element

Fieldset with display: table-column disappears entirely in IE8 & IE9

The display: table-column means it acts like the <col> tag in HTML. The <col> tag is an invisible element which is used to specify properties of the column like styles etc. It is not the same as <td> (which is display: table-cell).

You should use table-cell instead.

W3C Spec

Source - Random832's answer in this SO Thread

EDIT: table-column still gets displayed in IE 7, FireFox 24, Chrome and Opera 15. It doesn't work in IE 8, 9 and 10.

table-row not 100% of table container (fieldset)

ok, found the problem. Seems like a fieldset element will not work as a table-displayed element.
How strange.

Fieldsets with tables inside. How to put them on the same line?

It's not tabular data, so why are you using a table?

There are numerous css fieldset examples to use to make nice looking fieldsets using labels and inputs appropriately. (See http://www.pixy.cz/blogg/clanky/css-fieldsetandlabels.html and http://www.sitepoint.com/fancy-form-design-css-4/ for two quick examples)

If you then want to have the two fieldsets arranged horizontally, you can use display: inline-block

Table's overflow-x inside fieldset

You need to min and max width on fieldset too, so this should do the job:

.gridwrapper {
    border: 1px solid black;
    overflow-x: auto;
}
.content-wrapper, fieldset {
    min-width: 200px;
    max-width: 400px;
    margin: 0 auto;
}
table {
    width: 100%;
}

Based on clarifications, here is another attempt:

.content-wrapper {
min-width: 200px;
max-width: 400px;
margin: 0 auto;
overflow-x: scroll;
}
.gridwrapper {
border: 1px solid #000;
overflow-x: auto;
max-width: 350px;
}
table {
    width: 100%;
}

Table overflow in fieldset not working

You can use width: 100vw; instead of width: 100%;.

Jsbin

#pai {
    width: 100vw;
    overflow-x: auto;
    float: left;
    white-space: nowrap;
}

Or you have to give min-width: 0; to fieldset. fieldset has min-width: -webkit-min-content; by default so you override that.

fieldset {
    width: 100%;
    min-width: 0;
}

Jsbin

display:table-cell not working on button element

The problem is that the <button> element cannot accept changes to the display property.

Certain HTML elements, by design, do not accept display changes. Three of these elements are:

• <button>
• <fieldset>
• <legend>

The idea is to maintain a level of common sense when styling HTML elements. For instance, the rule prevents authors from turning a fieldset into a table.

However, there is an easy workaround in this case:

Solution 1: Wrap each <button> in a div element.

OR

Solution 2: Use another element to submit the form data.

Note that some browser versions may actually accept a display change on a <button>. However, the solutions above are reliable cross-browser.

References:

• Bug 984869 - display: flex doesn't work for button elements
• Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

---

Related Topics