Languages

See also the index of all tips.

Folding table columns

The two tables below can be shown in full or with one or more columns omitted. This page demonstrates two methods to switch between the different views. Either

• select an alternative sheets (in browsersyou can find them in the View menu)or
• click on the column headers.

The 'visibility' property

Usuallyto hide an element from viewyou 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 particularwe use 'visibility: collapse' herewhich is designed especially for hiding table columns and rows.

With this methodthe layout of the table is actually computed with the collapsed column still presentbut 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 visiblethen something (we'll see below what) changes the value of 'visibility' on some columns from 'visible' to 'collapse'. Those columns disappearbut 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 backagain without changing the layout of any cells. That not only makes the process quickit also helps your eyes to recognize each column after it moved.

To put rules on table columnsthere have to be elements in the document that represent those columns. In HTMLthose 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 rules. One of those 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.

Alternative sheets

The first method involves alternative sheets (see the article “Alternative sheets”). This page has no less than eleven alternative s called “View for…”, corresponding to eleven different ways to display the tables. The HTML code looks like this:

<link
  rel="alternate sheet"
  href="folding/month02.css"
  title="View for February">
<link
  rel="alternate sheet"
  href="folding/month03.css"
  title="View for March">
<link
  rel="alternate sheet"
  href="folding/month04.css"
  title="View for April">
...

Each of those alternative s is only two lines: a line to import the default sheetand a line to collapse the relevant columns. E.g.here is the complete month04.css file. It hides the .m01.m02 and .m03 columnsi.e.the columns for JanuaryFebruary and March:

@import "../../CSS/w3c-2010/main.css";
.m01.m02.m03 { visibility: collapse }

Alternative sheets are an easy method. As you seethe rules are short and simple. On the other handswitching between s is typically not very quickbecause the user has to select a from a menu. That involves a number of mouse movements or several key presses.

The ':target' selector hack

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

We can use that selector here to the table differently based on which element is the current target. Then we only have to provide links to those targets and with every click on a linka different element becomes the target and a different applies.

We need as many potential targets in the document as we have different sand hyperlinks to those targets. This page uses empty <div> elements as targets and puts the <a> elements inside the column headers:

<div class=hack id=view02></div>
<div class=hack id=view03></div>
<div class=hack id=view04></div>
...
<table>
...
<th><a
 title="Click to hide earlier columns"
 href="#view02">Feb<a>
<th><a
 title="Click to hide earlier columns"
 href="#view03">Mar<a>
<th><a
 title="Click to hide earlier columns"
 href="#view04">Apr<a>
...

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

These extra <div> and <a> elements have no other function than to support the and that is why I call this method a hack. In some future extension of CSS there will probably be a way to toggle the of elements directly (see below).

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

#view02:target ~ * .m01 {
  visibility: collapse }

It says to collapse the element .m01 if it is a descendant of an element that is itself a following sibling of the element that has the ID “view02” and is the current target. See the “view.css” sheet for the full set of rules. (There are 66 of them for this particular example.)

These rules allow the reader to show and hide columns by clicking on column headers. An extra advantage is that each different 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 JanFebMarApr and May already hidden.

Normallywhen you follow a linkthe browser scrolls the window such that the target element is displayed near the top. In this case the targets are hidden from view:

.hack { display: none }

No specification defines what the browser should scroll to in that casebut hopefully it simply doesn't scroll at all.

Conflicting methods

As this page uses two different methods to fold columnsone of the two must take precedence. In this casethe alternative s win: if you selected the “View for June” and then click on the August columnthe June column will not collapse.

It is easyhoweverto reverse the precedence. The link to the sheet with the ':target' rules looks like this:

<link
  rel=sheet
  href="folding/view.css"
  title="Main">

which means the sheet is only loaded together with other s called “Main” and not with any of the s called “View for…” Just removing the title attribute is enough to make the sheet apply no matter what alternative is loaded.

Limitations and a possible future

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

As said abovethe method with the ':target' selector requires the addition of extra elements in the source. Alsoif you want to use hyperlinks for other purposese.g.for a table of contentsthen you cannot use them for folding tables anymore. (On the other hand, you could build a similar trick with the ':checked' selector instead of the ':target' selector. That frees up the hyperlinksbut has other constraints. Another page shows an example with ':checked'.)

For these reasonsCSS should eventually get a feature to toggle directly between two or more s for an elementwithout needing explicit hyperlinks.

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

ul:alternative { content: "+" }

would mean that <ul> elements can be toggled between two states and when the user toggles the element to the secondalternative statea “+” is displayed instead of the contents of the element.

Site navigation

Created 7 July 2011;
Last updated Thu 02 Oct 2025 06:40:52 AM UTC

Languages

• Deutsch
• English
• Français
• Português
• 简体中文
• 繁體中文

About the translations