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.

Advertisements

One response to “Quick trick with tables: fixing column width

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s