How are `display: table-cell` widths calculated?

This is the result of the automatic table layout algorithm as implemented by the browser. This can vary across browsers because the CSS2.1 spec doesn't specify all auto layout behavior, but it does outline an algorithm commonly used by browsers with HTML tables, because the CSS table model is based on the HTML table model for the most part.

In general, if the table doesn't have a specified width (i.e. it uses the default auto), then the cell with the percentage width is as wide as required by its contents, and no more. That calculated width (together with any other widths specified on other cells) is then used as the percentage to find the maximum width of the entire table, and the rest of the columns are resized accordingly. Note that the table can still be constrained by its containing block (in your example, it's the initial containing block established by the result pane).

On my PC running Firefox, .cell-1 has a computed width of 33 pixels. When you specify its width as 1%, the maximum width that the table will have is 3300 pixels (33 × 100 = 3300). You would need a very large screen to see this in your example, so I removed the padding which drastically reduces the width of .cell-1 to 9 pixels and thus the maximum table width to 900 pixels. If you resize the preview pane to greater than 900 pixels, you will see that the table stops growing at that point.

When you increase the width of .cell-1 to 10%, the same 33 pixels now becomes 10% of the maximum width of the table. In turn, the maximum table width becomes 330 pixels (which is in fact 10% of 3300 pixels, because 100 ÷ 10 = 10).

The moment you specify the width of .table as 100%, the table is sized according to its containing block. In your case, that just means stretching it to the full width of the result pane. .cell-1 still has to obey its width: 10% declaration, so it stretches to 10% of the width of the table since the content doesn't require anything wider. If you resize the result pane to a very narrow width, you'll see that .cell-1 shrinks along with the table, but not past its minimum content width.

By default, CSS tables have 3 components in lieu of HTML tables

• display:table

  by default, this will take the content width unless the UA styles override it with the width: xx% property

• display:table-row

  this attribute has got no height for itself and only follows the dimesnion of the td, i.e., table-cell in it.

• display:table-cell

  like display:table, it also takes the width of its parent, .i.e., table and is divided equally in terms of width among its siblings. for eg., if you have 200px wide table with 5 cells (and none of them have width defined manually), all the table-cell would take equal px amongst them....40px each!!