visibility-collapse-colspan-001.html (1988B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <script src='/resources/testharness.js'></script> 4 <script src='/resources/testharnessreport.js'></script> 5 <link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> 6 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> 7 <style> 8 td { 9 padding: 0; 10 } 11 </style> 12 <h1>Visibility collapse</h1> 13 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> 14 <p> 15 Setting a spanning column to visibility:collapse changes table width but 16 not height. The middle column has been collapsed. 17 </p> 18 <table id="test" style="border-spacing: 0;"> 19 <col style="background-color:red;"> 20 <col style="background-color: blue; visibility: collapse;"> 21 <col style="background-color: green;"> 22 <tr> 23 <td><div style="width: 10px; height: 10px"></div></td> 24 <td><div style="width: 10px; height: 10px"></div></td> 25 <td><div style="width: 10px; height: 10px"></div></td> 26 </tr> 27 <tr> 28 <td><div style="width: 10px; height: 10px"></div></td> 29 <td><div style="width: 10px; height: 10px"></div></td> 30 <td><div style="width: 10px; height: 10px"></div></td> 31 </tr> 32 <tr> 33 <td><div style="width: 10px; height: 10px"></div></td> 34 <td><div style="width: 10px; height: 10px"></div></td> 35 <td><div style="width: 10px; height: 10px"></div></td> 36 </tr> 37 <tr> 38 <td colspan="3"><div style="width: 30px; height: 10px"></div></td> 39 </tr> 40 </table> 41 42 <script> 43 tests = [ 44 [ 45 document.getElementById('test').offsetHeight, 46 40, 47 "col visibility:collapse doesn't change table height", 48 ], 49 [ 50 document.getElementById('test').offsetWidth, 51 20, 52 "col visibility:collapse changes table width" 53 ]]; 54 for (i = 0; i< tests.length; i++) { 55 test(function() 56 { 57 assert_equals.apply(this, tests[i]); 58 }, 59 tests[i][2]); 60 }; 61 </script> 62 </html>