visibility-collapse-colspan-002.html (2036B)
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 first column has been collapsed and column width is the widest cell 17 in the column. 18 </p> 19 <table id="test" style="border-spacing: 0;"> 20 <col style="background-color:red; visibility: collapse;"> 21 <col style="background-color: blue;"> 22 <col style="background-color: green;"> 23 <tr> 24 <td><div style="width: 10px; height: 10px"></div></td> 25 <td><div style="width: 20px; height: 10px"></div></td> 26 <td><div style="width: 10px; height: 10px"></div></td> 27 </tr> 28 <tr> 29 <td><div style="width: 10px; height: 10px"></div></td> 30 <td><div style="width: 20px; height: 10px"></div></td> 31 <td><div style="width: 20px; height: 10px"></div></td> 32 </tr> 33 <tr> 34 <td><div style="width: 10px; height: 10px"></div></td> 35 <td><div style="width: 20px; height: 10px"></div></td> 36 <td><div style="width: 30px; height: 10px"></div></td> 37 </tr> 38 <tr> 39 <td colspan="3"><div style="width: 25px; height: 10px"></div></td> 40 </tr> 41 </table> 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 50, 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>