Search code examples
htmlwidthcss-tables

What is the behavior when sum of widths of columns != table width?


I have a table with a fixed width of 800.

I noticed that when the column widths don't add up to 800, my browser (Chrome) will arbitrarily choose one column to increase in size (could be more than one, I'm not sure).

Also, when I make the sum of the widths of the columns > 800, then it just accepts it.

Is there a standard behavior of how a browser should behave when the sum of the widths of the columns do not equal the width of the table?


Solution

  • Yes, it seems to be proper behavior.

    According to the spec, user agents (browsers) are directed to "reflow" columns as necessary

    If column widths prove to be too narrow for the contents of a particular table cell, user agents may choose to reflow the table.

    http://www.w3.org/TR/html4/struct/tables.html#column-width

    Also,

    User agents may use any algorithm they wish to do so, and are free to prefer rendering speed over precision, except when the "fixed layout algorithm" is selected.

    See more here

    http://www.w3.org/TR/CSS2/tables.html#width-layout