I have a table with 25 rows and 15 columns of numeric data. I'd like to be able to show/hide columns. The default state will be to show about 10 columns, but if the user clicks on something in the header area of one of the columns then i'd like 2 new columns to become visible.

Example:
Col1 Col2 Col3
Row1 data1 data2 data3
Row2 data4 data5 data6

Then the user clicks on Col2 and now new cols are visible between col2 and col3:

Col1 Col2 NewCol Col3
Row1 data1 data2 newdata1 data3
Row2 data4 data5 newdata2 data6

Should I use a Table for this and then change the visibility attribute for all of NewCol's TD elements (one per row)? Or is there a better way?

Thanks!

You can't do this with CSS alone, but need JavaScript to change either the inline styles, or classes containing styles to toggle the columns on and off. Classes will be faster.