Not to be confused with layout tables, this little used, yet wonderful CSS property ‘table-layout’ could have saved me a lot of time recently, had I thought of it. You see, the challenge I had was that I needed all columns of a table (containing tabular data) to be presented with equal width columns.

My immediate thought was to use col and specify widths in percentages. However, the difficulty was that the number of columns varied from 3 to 5 so I couldn’t just specify one single percentage, since the percentage would vary from approximately 33.3% for 3 columns to 20% for 5 columns.

Being a little rushed and not actually stopping to think, I decided that my only solution would be to specify a presentational class for the table element that indicated the number of columns, and then use that to select and style the col elements with the appropriate width. It wasn’t till a couple of days later that the better solution presented itself, which is ironic since I have, for about a week beforehand, been going over the CSS 2.1 tables module with a fine tooth comb, writing test cases for it and contributing them to the CSS 2.1 test suite.

The fixed table layout algorithm (CSS 2.1, section 17.5.2.1) defines in step 3:

Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

Which means, if I hadn’t specified widths for any columns, nor any cell in the first row (as described in the rest of the algorithm), all the columns would be set to equal width. Oh, and by the way: Yes, this property is (miraculously) supported by IE! Now that I know how this property works, I’m sure I’ll be making a lot more use of it.