<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>CSS Tables: Visibility</title>
  <style type="text/css">
   body { background: white; color: black; }
   span[onclick] { text-decoration: underline; color: blue; cursor: pointer; }
   span[onclick]:hover { color: red; }
   .collapse { visibility: collapse; }
   table { border-spacing: 1em; }
  </style>
  <script type="text/javascript">
   function toggle(element) {
     element = document.getElementById(element);
     if (element.className == '') {
       element.className = 'collapse';
     } else {
       element.className = '';
     }
   }
  </script>
 </head>
 <body>
  <p>Toggle: <span onclick="toggle('col2')">Column 2</span>
             <span onclick="toggle('col3')">Column 3</span>
             <span onclick="toggle('row2')">Row 2</span>
             <span onclick="toggle('row3')">Row 3</span></p>
  <p>When column 3 is collapsed, row 3 shouldn't move up. When row 2
  is collapsed, column 3 shouldn't move left. However, when column 2
  is collapsed, column 3 should move left, and when row 2 is
  collapsed, row 3 should move up.</p>
  <table>
   <colgroup><col/><col id="col2"/><col id="col3"/></colgroup>
   <tr>
    <td/>
    <th onclick="toggle('col2')">Column 2</th>
    <th onclick="toggle('col3')">Column 3</th>
   </tr>
   <tr id="row2">
    <th onclick="toggle('row2')">Row 2</th>
    <td>Some really very long data</td>
    <td>Some data<br/>on two lines</td>
   </tr>
   <tr id="row3">
    <th onclick="toggle('row3')">Row 3</th>
    <td>Data</td>
    <td>Yet more data</td>
   </tr>
  </table>
 </body>
</html>