Languages

Web Style Sheets CSS tips & tricks

See also the index of all tips.

Folding table columns

This page shows a method to fold table columns with the 'visibility' property and the ':checked' selector. It should be compared with the similar page that uses the 'visibility' property and the ':target' selector. See that page for an explanation of 'visibility: collapse'. Here I will just explain how to use the ':checked' selector instead of the ':target' selector.

The table below is set up such that clicking on a month name hides all the months to the left of it. (January does nothing.) Clicking the header of the first column makes them appear again.

First example table
Jan
First 56 28 85 24 67 27 67 20 21 74 45 48
Second 34 28 84 74 95 77 21 31 54 34 84 47

Method

It works as follows: Each column header is a <label> element and clicking it turns a radio button to on. All radio buttons have name=colcontrol to make them part of a single group, i.e., only one of them can be on at a time. Here are the radio button and the column header for the April column: 

<input id=v04 type=radio name=colcontrol>
...
<th><label for=v04>Apr</label>

The radio buttons (<input> elements) are placed just before the table and, to make the page look nicer, they are made invisible with 'input {display: none}'.

There are various ways to indicate which columns should be visible and which should be collapsed when a radio button is on. I have chosen to use classes: When, e.g., radio button v09 is checked, all columns with class v09 are collapsed.

That means that each <col> element needs to have a set of classes to indicate when it is collapsed. E.g., the column corresponding to August should be collapsed whenever one of the radio buttons for September (v09), October (v10), November (v11) or December (v12) is checked: 

<col class="v12 v11 v10 v09">

The CSS rules are simple. I have twelve radio buttons. (There are thirteen columns, but ‘Jan’ doesn't need a button). Eleven of those make certain columns collapse, so I need eleven selectors. Here is the complete style sheet: 

input {display: none}
#v02:checked ~ table .v02, #v03:checked ~ table .v03,
#v04:checked ~ table .v04, #v05:checked ~ table .v05,
#v06:checked ~ table .v06, #v07:checked ~ table .v07,
#v08:checked ~ table .v08, #v09:checked ~ table .v09,
#v10:checked ~ table .v10, #v11:checked ~ table .v11,
#v12:checked ~ table .v12 {visibility: collapse}
label:hover {outline: thin solid; cursor: cell}

The last line is optional, but helps to indicate visually that the label is clickable.

Make sure the <input> elements are indeed before the table and not inside some other element (it is easy to put them in a <p> by mistake), otherwise the sibling selector ('~') doesn't work. See the next section.

Markup

Here is the essential part of the mark-up. Or you can look at the source of this page. 

<input id=v01 type=radio name=colcontrol>
<input id=v02 type=radio name=colcontrol>
<input id=v03 type=radio name=colcontrol>
<input id=v04 type=radio name=colcontrol>
<input id=v05 type=radio name=colcontrol>
<input id=v06 type=radio name=colcontrol>
<input id=v07 type=radio name=colcontrol>
<input id=v08 type=radio name=colcontrol>
<input id=v09 type=radio name=colcontrol>
<input id=v10 type=radio name=colcontrol>
<input id=v11 type=radio name=colcontrol>
<input id=v12 type=radio name=colcontrol>

<table>
 <caption>First example table</caption>
 <col>
 <col class="v12 v11 v10 v09 v08 v07 v06 v05 v04 v03 v02">
 <col class="v12 v11 v10 v09 v08 v07 v06 v05 v04 v03">
 <col class="v12 v11 v10 v09 v08 v07 v06 v05 v04">
 <col class="v12 v11 v10 v09 v08 v07 v06 v05">
 <col class="v12 v11 v10 v09 v08 v07 v06">
 <col class="v12 v11 v10 v09 v08 v07">
 <col class="v12 v11 v10 v09 v08">
 <col class="v12 v11 v10 v09">
 <col class="v12 v11 v10">
 <col class="v12 v11">
 <col class="v12">
 <col>
 <col>
 <thead>
  <tr>
   <th><label for=v01>Item</label>
   <th>Jan
   <th><label for=v02>Feb</label>
   <th><label for=v03>Mar</label>
   <th><label for=v04>Apr</label>
   <th><label for=v05>May</label>
   <th><label for=v06>Jun</label>
   <th><label for=v07>Jul</label>
   <th><label for=v08>Aug</label>
   <th><label for=v09>Sep</label>
   <th><label for=v10>Oct</label>
   <th><label for=v11>Nov</label>
   <th><label for=v12>Dec</label>
 <tbody>
  ...
<table>
Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 17 Jan 2017;
Last updated Wed 06 Jan 2021 05:40:49 AM UTC

Languages

About the translations