Languages

See also the index of all tips.

The two tables below can be shown in full or with one or morecolumns omitted. This page demonstrates two methods to switchbetween the different views. Either

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. Inparticular, we use 'visibility: collapse' here, which is designedespecially for hiding table columns and rows.

With this method, the layout of the table is actually computedwith the collapsed column still present, but that column is thennot displayed. The effect is to leave unused space at the rightedge of the table.

The 'collapse' value is meant for interactive use: at first allcolumns are visible, then something (we'll see below what) changesthe value of 'visibility' on some columns from 'visible' to'collapse'. Those columns disappear, but the contents of theremaining columns is not changed in any way. The columns only movecloser together. When the value changes back to 'visible', thecollapsed columns reappear and the other columns move back, againwithout changing the layout of any cells. That not only makes theprocess quick, it also helps your eyes to recognize each columnafter it moved.

To put style rules on table columns, there have to be elementsin the document that represent those columns. In HTML, those arethe elements. The HTML code for thetables above looks like this:

The class attributes are there to make it easier to write thestyle rules. One of those style rules is:

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

The first method involves alternative style sheets (see thearticle “Alternative style sheets”).This page has no less than eleven alternative styles called “Viewfor…”, corresponding to eleven different ways to display thetables. The HTML code looks like this:

Each of those alternative styles is only two lines: a line toimport the default style sheet, and a line to collapse the relevantcolumns. E.g., here is the complete month04.css file. It hidesthe .m01, .m02 and .m03 columns, i.e., the columns for January,February and March:

Alternative style sheets are an easy method. As you see, thestyle rules are short and simple. On the other hand, switchingbetween styles is typically not very quick, because the user has toselect a style from a menu. That involves a number of mousemovements or several key presses.

The second method relies on the ':target' selector. It selectsthe (at most one) element in a document that is the target of thelink that you followed to reach that document. (See the article “A tabbed interface” for more about ':target'.)

We can use that selector here to style the table differentlybased on which element is the current target. Then we only have toprovide links to those targets and with every click on a link, adifferent element becomes the target and a different style applies.

We need as many potential targets in the document as we havedifferent styles, and hyperlinks to those targets. This page usesempty elements as targets and puts the elements inside the column headers:

(The title attributes explain a bit what happens for each link.)

These extra and elements have no other function than to supportthe style and that is why I call this method a hack. In some futureextension of CSS there will probably be a way to toggle the styleof elements directly (see below).

The style rules are a bit complicated. Here is one of them:

It says to collapse the element .m01 if it is a descendant of anelement that is itself a following sibling of the element that hasthe ID “view02” and is the current target. See the “view.css” style sheet for thefull set of rules. (There are 66 of them for this particularexample.)

These rules allow the reader to show and hide columns byclicking on column headers. An extra advantage is that eachdifferent way to display the tables has its own URL. E.g., http://www.w3.org/Style/Examples/folding#view06 opens the page with the columns Jan, Feb, Mar, Apr and Mayalready hidden.

Normally, when you follow a link, the browser scrollsthe window such that the target element is displayed near the top.In this case the targets are hidden from view:

No specification defines what the browser should scroll to inthat case, but hopefully it simply doesn't scroll at all.

As this page uses two different methods to fold columns, one ofthe two must take precedence. In this case, the alternative styleswin: if you selected the “View for June” style and then click onthe August column, the June column will not collapse.

It is easy, however, to reverse the precedence. The link to thestyle sheet with the ':target' rules looks like this:

which means the style sheet is only loaded together with otherstyles called “Main” and not with any of the styles called “Viewfor…” Just removing the title attribute is enough to make the stylesheet apply no matter what alternative style is loaded.

This page shows two tables whose columns fold and unfold thesame way and that is to illustrate the limitations of the twomethods: It would in fact be impossible to collapse columns in thetwo tables independently.

As said above, the method with the ':target' selector requiresthe addition of extra elements in the source. Also, if you want touse hyperlinks for other purposes, e.g., for a table of contents,then you cannot use them for folding tables anymore. (On the otherhand, you could build a similar trick with the ':checked' selectorinstead of the ':target' selector. That frees up the hyperlinks,but has other constraints. Another page shows an example with ':checked'.)

For these reasons, CSS should eventually get a feature to toggledirectly between two or more styles for an element, without needingexplicit hyperlinks.

As of July 2011, the CSS working group has not yet published aWorking Draft with such a feature, but there are ideas. One suchidea is to introduce a pseudo-class ':alternative'. A rule such as

would mean that elements can betoggled between two states and when the user toggles the element tothe second, alternative state, a “+” is displayed instead of thecontents of the element.

Created 7 July 2011;Last updated Wed 06 Jan 2021 05:40:49 AM UTC

About the translations