Quick trick with tables: fixing column width

It is interesting how we never get bored while creating different solutions.

I’m improving the design of an application — and I guess if I am improving it then it was really ugly before… — and needed to add a column that will be larger than the other ones.  Unfortunately, unless you have your data displayed already then all columns will be shown with the same width.

How to solve that?  Using an old trick!

First of all, you define — using colspans, if possible — what is the proportion of the expanded column.

After that, you just specify that such a table should be rendered with a fixed layout in your CSS:

table-layout: fixed;

This will do the trick and render the table the correct way.