Not to be confused with layout tables, this little used, yet wonderful CSS
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 22.214.171.124) 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.