visibility-collapse-col-002.html (2831B)
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-width"> 8 <style> 9 x-table { 10 border: 5px solid black; 11 } 12 x-table span { 13 display: inline-block; 14 vertical-align: top; 15 background: lime; 16 margin: 3px; 17 height: 100px; 18 width: 100px; 19 } 20 </style> 21 <main> 22 <h1>Visibility collapse</h1> 23 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> 24 <p> 25 Setting a column to visibility:collapse changes table width but not height. 26 </p> 27 <x-table id="one"> 28 <x-tbody> 29 <x-tr> 30 <x-td> 31 <span>row 1</span> 32 </x-td> 33 <x-td> 34 <span></span> 35 </x-td> 36 </x-tr> 37 <x-tr> 38 <x-td> 39 <span>row 2</span> 40 </x-td> 41 <x-td> 42 <span></span> 43 </x-td> 44 </x-tr> 45 <x-tr> 46 <x-td> 47 <span>row 3</span> 48 </x-td> 49 <x-td> 50 <span style="height:50px"></span> 51 </x-td> 52 </x-tr> 53 </x-tbody> 54 </x-table> 55 Second table is identical to first except both column groups have been collapsed. 56 5px borders are still visible. 57 <x-table id="two"> 58 <x-colgroup style="visibility:collapse;"></x-colgroup> 59 <x-colgroup style="visibility:collapse;"></x-colgroup> 60 <x-tbody> 61 <x-tr> 62 <x-td> 63 <span>row 1</span> 64 </x-td> 65 <x-td> 66 <span></span> 67 </x-td> 68 </x-tr> 69 <x-tr> 70 <x-td> 71 <span>row 2</span> 72 </x-td> 73 <x-td> 74 <span></span> 75 </x-td> 76 </x-tr> 77 <x-tr> 78 <x-td> 79 <span>row 3</span> 80 </x-td> 81 <x-td> 82 <span style="height:50px"></span> 83 </x-td> 84 </x-tr> 85 </x-tbody> 86 </x-table> 87 88 </main> 89 90 <script> 91 tests = [ 92 [ 93 document.getElementById('two').offsetHeight, 94 document.getElementById('one').offsetHeight, 95 "col visibility:collapse doesn't change table height" 96 ], 97 [ 98 document.getElementById('two').offsetWidth, 99 10, 100 "col visibility:collapse changes table width" 101 ]]; 102 for (i = 0; i< tests.length; i++) { 103 test(function() 104 { 105 assert_equals.apply(this, tests[i]); 106 }, 107 tests[i][2]); 108 }; 109 </script> 110 </html>