How Are 'Display: Table-Cell' Widths Calculated

How are table cell widths calculated in html?

This question was answered here : How is column width determined in browser?

Now, to help you solve this issue, consider the way you are using colgroups.

I cleaned it up a little for you in your fiddle. But generally, I'd use the colgroups this way instead

  <colgroup width="50%" />
  <colgroup width="50%" />

See DEMO

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.

Understanding CSS table-cell and percentage width

This has to do with how automatic table layout works. In particular:

A percentage value for a column width is relative to the table width. If the table has 'width: auto', a percentage represents a constraint on the column's width, which a UA should try to satisfy. (Obviously, this is not always possible: if the column's width is '110%', the constraint cannot be satisfied.)

In your case, you're setting a minuscule percentage width on every table-cell element. But the browser needs to ensure that the table-cells fill up the width of the table (which itself is as wide as its containing block), so it has to expand the cells to occupy as much space within the table as possible.

The reason why this results in approximately equal-width cells is because the percentage value is equal for all of them. If, for example, you set a slightly larger width for one of the cells, you'll see that it grows wider and the other cells become narrower to accommodate:

div {  border: 1px solid #000;  border-radius: 4px;}
div ul {  padding: 0;  margin: 0;}
div ul li {  display: table-cell;  width: 1%;  text-align: center;  border-right: 1px solid #000;  padding: 10px 0;}
div ul li:first-child {  width: 3%;}
div ul li:last-child {  border-right: 0;}

<div>  <ul>    <li><a href="#">Commits</a>    </li>    <li><a href="#">Branch</a>    </li>    <li><a href="#">Contribution</a>    </li>    <li><a href="#">anything</a>    </li>  </ul></div>

What is the default width of an HTML table cell td?

The physical/visual width of a table cell is defined not by HTML, but by CSS. The CSS 2.1 specification has an entire section dedicated to table layout that complements HTML's description of tabular data.

Furthermore, CSS itself does not fully define how the width of a cell is calculated. It does with the fixed table layout algorithm:

In the fixed table layout algorithm, the width of each column is determined as follows:

1. A column element with a value other than 'auto' for the 'width' property sets the width for that column.
2. Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
3. Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

The width of the table is then the greater of the value of the 'width' property for the table element and the sum of the column widths (plus cell spacing or borders). If the table is wider than the columns, the extra space should be distributed over the columns.

but it doesn't give anything beyond a rough guideline for auto table layout, which user agents are free to follow or deviate from (it lists a step-by-step procedure not unlike that of fixed table layout, but that entire list is non-normative). Generally you can expect consistent behavior from UAs in the most common scenarios — as you observe, an auto-sized table cell generally takes up as much space as required by its content, and no more. But dig into edge cases, and you'll find all sorts of crazy.

How is column width determined in browser?

From http://www.w3.org/TR/CSS21/tables.html

This was not overriden by CSS3 yet, but this part of spec is non-normative, so probably browsers does not comply to it exactly (there is no normative definition of this behavior afaik).

Column widths are determined as follows:

1. Calculate the minimum content width (MCW) of each cell: the formatted
   content may span any number of lines but may not overflow the cell
   box. If the specified 'width' (W) of the cell is greater than MCW, W
   is the minimum cell width. A value of 'auto' means that MCW is the
   minimum cell width.
   Also, calculate the "maximum" cell width of each cell: formatting the
   content without breaking lines other than where explicit line breaks
   occur.
2. For each column, determine a maximum and minimum column width from the
   cells that span only that column. The minimum is that required by the
   cell with the largest minimum cell width (or the column 'width',
   whichever is larger). The maximum is that required by the cell with
   the largest maximum cell width (or the column 'width', whichever is
   larger).
3. For each cell that spans more than one column, increase the minimum
   widths of the columns it spans so that together, they are at least as
   wide as the cell. Do the same for the maximum widths. If possible,
   widen all spanned columns by approximately the same amount.
4. For each column group element with a 'width' other than 'auto',
   increase the minimum widths of the columns it spans, so that together
   they are at least as wide as the column group's 'width'.

This gives a maximum and minimum width for each column.

The caption width minimum (CAPMIN) is determined by calculating for
each caption the minimum caption outer width as the MCW of a
hypothetical table cell that contains the caption formatted as
"display: block". The greatest of the minimum caption outer widths is
CAPMIN.

Column and caption widths influence the final table width as follows:

1. If the 'table' or 'inline-table' element's 'width' property has a
   computed value (W) other than 'auto', the used width is the greater of
   W, CAPMIN, and the minimum width required by all the columns plus cell
   spacing or borders (MIN). If the used width is greater than MIN, the
   extra width should be distributed over the columns.
2. If the 'table' or
   'inline-table' element has 'width: auto', the used width is the
   greater of the table's containing block width, CAPMIN, and MIN.
   However, if either CAPMIN or the maximum width required by the columns
   plus cell spacing or borders (MAX) is less than that of the containing
   block, use max(MAX, CAPMIN).

A percentage value for a column width is relative to the table width.
If the table has 'width: auto', a percentage represents a constraint
on the column's width, which a UA should try to satisfy. (Obviously,
this is not always possible: if the column's width is '110%', the
constraint cannot be satisfied.)

css display table cell requires percentage width

You just need to add 'table-layout: fixed;'

.table {
   display: table;
   height: 100px;
   width: 100%;
   table-layout: fixed;
}

http://www.w3schools.com/cssref/pr_tab_table-layout.asp

How table-cell width with percentage value works?

Here's the Math:

table-cell's width on 100% means that you have a table with a single cell per row. The known width - in your case - is the width of the text (89px).

If we put table-cell's width at 50%, that means the cell is wider as half of the whole table's width. We double the known width going to 178px.

Conclusion, the end width will be 100 / {table-cell's width} * {element's offsetWidth}

Why this happens is explained with the already posted link http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

Setting px width for table-cell

As requested in the comments, here is an example of using display: flex (flexbox) to vertically-align text (as you were trying to do with display: table-cell). You can also specify width and height of a flexbox easily, like a normal block element.

As you can see, the display:flex element correctly vertically-centers the text, and can be set to a 1040px width correctly.

* {  box-sizing: border-box;}html, body {  height: 100%;  padding: 0;  margin: 0;}div#container {  display: flex;  align-items: center;  height: 100%;  width: 1040px;}div#centered {  height: 20px;  width: 100%;  text-align: center;}

<div id="container">  <div id="centered">Vertically-centered using <code>display: flex</code>.</div></div>

---

Related Topics