visibility-collapse-col-005.html (1753B)
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 right two columns here have been collapsed. 17 </p> 18 <table id="test" style="border-collapse: collapse;"> 19 <colgroup> 20 <col style="background:#00F"/> 21 <col span="2" style="background:#F00; visibility: collapse"/> 22 </colgroup> 23 <tbody> 24 <tr> 25 <td><div style="width: 100px; height: 100px"></div></td> 26 <td><div style="width: 10px; height: 10px"></div></td> 27 <td><div style="width: 1px; height: 1px"></div></td> 28 </tr> 29 <tr> 30 <td><div style="width: 100px; height: 100px"></div></td> 31 <td><div style="width: 10px; height: 10px"></div></td> 32 <td><div style="width: 1px; height: 1px"></div></td> 33 </tr> 34 </tbody> 35 </table> 36 <script> 37 tests = [ 38 [ 39 document.getElementById('test').offsetHeight, 40 200, 41 "col visibility:collapse doesn't change table height", 42 ], 43 [ 44 document.getElementById('test').offsetWidth, 45 100, 46 "col visibility:collapse changes table width" 47 ]]; 48 for (i = 0; i< tests.length; i++) { 49 test(function() 50 { 51 assert_equals.apply(this, tests[i]); 52 }, 53 tests[i][2]); 54 }; 55 </script>