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

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.