CSS: Folding Table Columns - W3C

The 'visibility' property

Usually, to hide an element from view, you use the 'display' property and set it to 'none'. But CSS also has a property called 'visibility', which hides elements in a different way. In particular, we use 'visibility: collapse' here, which is designed especially for hiding table columns and rows.

With this method, the layout of the table is actually computed with the collapsed column still present, but that column is then not displayed. The effect is to leave unused space at the right edge of the table.

The 'collapse' value is meant for interactive use: at first all columns are visible, then something (we'll see below what) changes the value of 'visibility' on some columns from 'visible' to 'collapse'. Those columns disappear, but the contents of the remaining columns is not changed in any way. The columns only move closer together. When the value changes back to 'visible', the collapsed columns reappear and the other columns move back, again without changing the layout of any cells. That not only makes the process quick, it also helps your eyes to recognize each column after it moved.

To put style rules on table columns, there have to be elements in the document that represent those columns. In HTML, those are the <col> elements. The HTML code for the tables above looks like this: <table> <col> <col> <col class=m01> <col class=m02> <col class=m03> <col class=m04> <col class=m05> <col class=m06> <col class=m07> <col class=m08> <col class=m09> <col class=m10> <col class=m11> <col class=m12> <thead> <tr> <th>...

The class attributes are there to make it easier to write the style rules. One of those style rules is: col.m04 { visibility: collapse }

This folds away any columns with class m04. Next we need a way to toggle this rule on and off.