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). O

Answer 1

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.

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

You need to use the table-layout style. There's 3 possible values:

• auto. The default. Width is dependent on content.
• fixed. Depends on the stated widths in the CSS.
• inherit. Inherits the value from it's parent.

In your case you need to use table-layout: fixed on your table element.

Answer 4

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?