visibility-collapse-001.xht (2105B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: CSS Tables: Visibility</title> 5 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 6 <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/011.xml" type="application/xhtml+xml"/> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#dynamic-effects"/> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility"/> 9 <meta name="flags" content="dom interact"/> 10 <style type="text/css"> 11 body { background: white; color: black; } 12 span[onclick] { text-decoration: underline; color: blue; cursor: pointer; } 13 span[onclick]:hover { color: red; } 14 .collapse { visibility: collapse; } 15 table { border-spacing: 1em; } 16 </style> 17 <script type="text/javascript"> 18 function toggle(element) { 19 element = document.getElementById(element); 20 if (element.className == '') { 21 element.className = 'collapse'; 22 } else { 23 element.className = ''; 24 } 25 } 26 </script> 27 </head> 28 <body> 29 <p>Toggle: <span onclick="toggle('col2')">Column 2</span> 30 <span onclick="toggle('col3')">Column 3</span> 31 <span onclick="toggle('row2')">Row 2</span> 32 <span onclick="toggle('row3')">Row 3</span></p> 33 <p>When column 3 is collapsed, row 3 shouldn't move up. When row 2 34 is collapsed, column 3 shouldn't move left. However, when column 2 35 is collapsed, column 3 should move left, and when row 2 is 36 collapsed, row 3 should move up.</p> 37 <table> 38 <colgroup><col/><col id="col2"/><col id="col3"/></colgroup> 39 <tr> 40 <td/> 41 <th onclick="toggle('col2')">Column 2</th> 42 <th onclick="toggle('col3')">Column 3</th> 43 </tr> 44 <tr id="row2"> 45 <th onclick="toggle('row2')">Row 2</th> 46 <td>Some really very long data</td> 47 <td>Some data<br/>on two lines</td> 48 </tr> 49 <tr id="row3"> 50 <th onclick="toggle('row3')">Row 3</th> 51 <td>Data</td> 52 <td>Yet more data</td> 53 </tr> 54 </table> 55 </body> 56 </html>