Computed column width is different than css declared width for column. How does browser decide width?

Question

Let's say I have an html table with a css declared width of 750px. It has 5 columns and each column has a width of 50px, declared using css (all td's have a 50px width). Obviously, the sum of the columns' widths is 250px which is less than 750px.

When the browser renders the table, each column has a different computed width. I have one column which has 5 spaces only but a computed width of over 100px ( a lot more than 5  's).

All columns fit their included text plus some extra blank spaces. No hard coded column widths are in the markup. Just a single 50px in the css for the 'td'.

How does the browser compute the rendered width of each column?

Answer 1

This is called the box-model. padding and borders are added to the elements width. So a DIV element with padding: 10px; width: 50px; border: 1px solid black; is actually 72 pixels in width. I expect your td's have a border or padding?

Answer 2

Browsers attempt to fit the cells within the table width, expanding/contracting the tds as needed.

So, you set the table at 750px, but only gave 250px of width. In that case, the browser will resort to its traditional spacing scheme where, based on the content in each cell, attempts to evenly space out the cells.

You can read more about how this works here.

Answer 3

When you set the width of table columns, it's just a recommended minimum width, that the browser tries to honor if possible. The actual width of the columns are calculated from the size of their content, dividing the leftover space evenly between the columns.

If any of the columns would end up narrower than the width that you specified, the browser would try to adjust it if there is free space in other columns, but in your case the columns are already over the minimum.

The actual algorithm to calculate the cell sizes differs from browser to browser, which means that the columns will end up slightly different depending on what browser you use.