visibility-collapse-rowspan-001.html (1848B)
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='stylesheet' href='support/base.css' /> 6 <link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> 7 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height"> 8 <main> 9 <h1>Visibility collapse</h1> 10 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-height">Spec</a> 11 <p> 12 Setting a rowspan to visibility:collapse doesn't change height or width in this case. 13 </p> 14 <table id="one"> 15 <tr> 16 <th>Month</th> 17 <th>Savings</th> 18 <th>Savings for holiday!</th> 19 </tr> 20 <tr> 21 <td>January</td> 22 <td>$100</td> 23 <td rowspan="2">$50</td> 24 </tr> 25 <tr> 26 <td>February</td> 27 <td>$80</td> 28 </tr> 29 </table> 30 Collapsing a spanning row does not change table height in this case. 31 <table id="two"> 32 <tr> 33 <th>Month</th> 34 <th>Savings</th> 35 <th>Savings for holiday!</th> 36 </tr> 37 <tr> 38 <td>January</td> 39 <td>$100</td> 40 <td rowspan="2" style="visibility:collapse;">$50</td> 41 </tr> 42 <tr> 43 <td>February</td> 44 <td>$80</td> 45 </tr> 46 </table> 47 </main> 48 49 <script> 50 tests = [ 51 [ 52 document.getElementById('two').offsetWidth, 53 document.getElementById('one').offsetWidth, 54 "spanning row visibility:collapse doesn't change table width" 55 ], 56 [ 57 document.getElementById('two').offsetHeight, 58 document.getElementById('one').offsetHeight, 59 "spanning row visibility:collapse doesn't change height in this case" 60 ]]; 61 for (i = 0; i< tests.length; i++) { 62 test(function() 63 { 64 assert_equals.apply(this, tests[i]); 65 }, 66 tests[i][2]); 67 }; 68 </script> 69 </html>