| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>CSS Test: CSS Tables: Visibility</title> |
| <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> |
| <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/table/011.xml" type="application/xhtml+xml"/> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#dynamic-effects"/> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/visufx.html#visibility"/> |
| <meta name="flags" content="dom interact"/> |
| <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> |
