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

user_129001 0
Viewed 10101

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?

firefox internet-explorer-7 browser css html
4 Answers

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.

user_1921220
Related