Display: Table-Cell Problems in Chrome

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/

Display: table-cell Working in Chrome not working in Firefox

Your basic problem as suggested in comments is that you shouldn't be using a table layout for this. Table layouts are for laying out tabular data, which this isn't.

Browsers have a certain amount of flexibility when it comes to laying out tables as the spec is relatively loose, which accounts for the differences you're seeing on the different browsers. Once you use table-cell rendering, the browser can reapportion space according to its own algorithm.

I would strongly recommend using another layout mechanism such as flexbox, but if you're determined to stick with table layout, you can use style="min-width:400px" to fix your specific issue.

Using position: relative on a table-cell as you have on the right is also going to cause you issues, so you should also reconsider that combination.

Chrome-specific CSS issue setting table cell to display:block

I don't see any DOCTYPE declared in the document, when you don't declare a doctype, Chrome overrides the display: block; with display: table-cell;

It works on JS Fiddle cuz they have doctype declared.

So use <!DOCTYPE html> at the very top of the document before <html> and it should fix the issue.

Display table and table-cell bug in Chrome

It is because you have given your .circle a width and height of 0, this means that there is actually no space inside the object and so when you give the width and height of the span as 100%, it's actual width and height will be 0

If you give your circle an actual width and height instead of making the shape using padding then it should work

http://jsfiddle.net/pj3u5/

Inconsistent behavior of display: table and display: table-cell in different browsers

From Everything You Know About CSS Is Wrong :

CSS tables happily abide by the normal rules of table layout, which
enables an extremely powerful feature of CSS table layouts: missing
table elements are created anonymously by the browser. The CSS2.1
specification states:

Document languages other than HTML may not contain all the elements
in the CSS 2.1 table model. In these cases, the “missing” elements
must be assumed in order for the table model to work. Any table
element will automatically generate necessary anonymous table objects
around itself, consisting of at least three nested objects
corresponding to a “table”/“inline-table” element, a “table-row”
element, and a “table-cell” element.

What this means is that if we use display: table-cell; without first
containing the cell in a block set to display: table-row;, the row
will be implied—the browser will act as though the declared row is
actually there.

So, the specs explicitly allow the use of display: table-cell; or display: table; and define how elements should behave in that case.

It remains unclear to me what's the expected behavior in each of these cases, but it does appears that we're dealing with bugs, and that at least Chrome is working on fixing them.

I gave Oriol the bounty for this answer because it's the only answer I've had thusfar that actually addressed the points I raised and offered some valuable information.

Table td display block not working on Chrome

Your table should be display: table. If you're worried about the lining, try adding display:block to the child elements.

The reason is that display: table creates the table layout mechanism , hence the rows and columns will be laid out properly;

In certain conditions if the required elements aren't there, they will be implicitly created, but it can cause problems. (You can test that out by making a table layout with divs and setting them to display: table, table-row, table-cell, which are the default user agent styles for table, tr, and td elements. If you play around with unsetting the styles on the divs in different combinations, you'll see that sometimes the browser implicitly makes the table layout incorrectly.)

So, always leave the display: table-* styles intact if you want an actual table layout. Sort out your lining issues using the appropriate styles for that.

You can try spaning across several divs, and defining your child element in it, using colspan(on the td) and display:block (on the child-element).

Firefox displaying table-cell incorrectly (chrome working good)

Have you tried table-layout:fixed; on your wrapper div (the one that specifies display: table;)?

I had a similar problem, this property forces the table to be a fixed width instead of determined by its contents. By default the table columns are set to the width of the widest cell (with breakable content) in the row, in your case the image, hence the second column being too big :)

More information on table-layout can be found here

Display: Table-Cell Problems in Chrome