html - How do you make a 100% width table with the columns all equal width?

Question

I'm trying to make a table that stretches 100% of the page (or whatever container it's in, depending on where I use it).

When I specify the width of the table to 100%, it automatically resizes the columns based on the width of their content. This is nice most of the time when I wouldn't mind different width columns, but for this, I need all of the columns to be the same width. I know that I could specify a percentage width for the columns, but I need this to work for any number of columns.

Here's my code so far: http://jsfiddle.net/zwWHZ/2/

Is it possible to have a table with a width of 100% and equal column widths without having to specify the percent for each column with pure CSS?

Answer 1

I tried putting table-layout: fixed; into the table section of the CSS, and that appeared to work (even when I changed the number of columns). The source where I found that is here.