Display:Table-Cell Not Working on an Input Element

display:table-cell not working on an input element

From W3.org:

"CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further."

Sorry, but display: table-cell on input elements is treated experimental. Try to avoid it, use wrapper-elements for the positioning for example.

I've made an example with div elements. You can now have multiple forms within a table, however it only works when the form element spans full rows. Otherwise your nesting will be broken.

EDIT:
Updated the fiddle with a version where border-collapse is added to avoid double borders.

JSFiddle example

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.

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

input/button display:table-cell/width:100% do not fill remaining space in table

Floats are good idea, you can follow Epik's solution.
I checked one thing with Firebug for Firefox and I learned that <button> works fine with its parent div having style="display: inline-flex".
You might want to check this against other browsers and use it conditionally, or go with floats instead.

IE11 shows every { display: table-cell } element at a new line

I submitted a bug report to the IE development team and it has been accepted as the issue.

I'll update this post upon changing the status of the bug.

Laying out input elements using display:table-cell

Here's a working version in codepen: http://codepen.io/mkleene/pen/ldqDH

The summary is that you need to remove the width: 100% on the submit button and then give the second table cell element width: 100%. You also need to make the textbox take up its entire parent with a 100% width.

You also need to make sure that the table element is using an auto table layout.

display: table-cell is not behaving like an actual table

Don't give buttons or inputs that are buttons display: table-cell.

It doesn't really work.

If you read http://getbootstrap.com/components/#input-groups-buttons it states:

Buttons in input groups are a bit different and require one extra
level of nesting. Instead of .input-group-addon, you'll need to use
.input-group-btn to wrap the buttons. This is required due to default
browser styles that cannot be overridden.

Here's a demo showing how to do this without Bootstrap, if you need it: http://jsfiddle.net/thirtydot/t34Au/3/

This uses the same basic method as Bootstrap.

And here's a demo where I copied the HTML from the Bootstrap demo and imported Bootstrap: http://jsfiddle.net/thirtydot/2cGaG/

Display: table-cell problems in chrome

The problem appears to be due to display: table-cell on input elements being experimental. See this question for more details: display:table-cell not working on an input element

The solution is to wrap the input in a span and apply display: table-cell to the span and to remove overflow: auto from the input.

The new mark up looks like so:

<div class="field">
    <label for="name">Subdomain</label>
    <span>
        <input type="text" id="name" name="name">
    </span>

    <div class="subdomain-base ">test</div>
</div>

The css now looks like this:

body {
    font-size: 13px;
}
.field {
    width:450px;
    display: table;
}
.field > * {
    display: table-cell;
    border: 1px solid red;
}
span {
    padding: 0 5px;
}
label {
    width: 125px;
}
input {
    width: 100%;
}
.subdomain-base {
    width: 1px;
}
.subdomain-base {
    color: blue;
    font-size: 13px;
}

Jsfiddle: http://jsfiddle.net/ahLMH/6/

CSS table cell inputs not taking full width

Remove the intervening margin_bottom div as it breaks the relationship between table-row and table-cell. And as you can't add margin to a table-row, to add spacing between rows, add the padding to the cells instead:

.full_width{width: 100%}.table{ display: table;}.table_row{display: table-row;}.table_cell{display:table-cell;padding-bottom: 18px;}.wrapper_cont{width: 48%}#cell2{padding-left: 4%}.label{display:block}

<div class="table full_width">    <div class="table_cell full_width">        <div id="does_something_important">            <div id="does_something_important2">                <form class="table full_width" method="post">                    <div class="table_row full_width">                            <div id="cell1" class="table_cell wrapper_cont">                                <span class="label">Name</span>                                <input class="full_width" value="Michael" type="text"/>                            </div>                            <div id="cell2" class="table_cell wrapper_cont">                                <span class="label">Email</span>                                <input class="full_width" type="text"/>                            </div>                    </div>                     <div class="table_row full_width">                            <div id="cell1" class="table_cell wrapper_cont">                                <span class="label">Name</span>                                <input class="full_width" value="Michael" type="text"/>                            </div>                            <div id="cell2" class="table_cell wrapper_cont">                                <span class="label">Email</span>                                <input class="full_width" type="text"/>                            </div>                    </div>                </form>            </div>        </div>    </div></div>

Display:Table-Cell Not Working on an Input Element