visibility-collapse-col-001.html (2626B)
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="David Grogan" href="mailto:dgrogan@chromium.org"> 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 Bottom table is identical to top except left column has been collapsed. 56 <x-table id="two"> 57 <x-colgroup style="visibility:collapse;"></x-colgroup> 58 <x-tbody> 59 <x-tr> 60 <x-td> 61 <span>row 1</span> 62 </x-td> 63 <x-td> 64 <span></span> 65 </x-td> 66 </x-tr> 67 <x-tr> 68 <x-td> 69 <span>row 2</span> 70 </x-td> 71 <x-td> 72 <span></span> 73 </x-td> 74 </x-tr> 75 <x-tr> 76 <x-td> 77 <span>row 3</span> 78 </x-td> 79 <x-td> 80 <span style="height:50px"></span> 81 </x-td> 82 </x-tr> 83 </x-tbody> 84 </x-table> 85 </main> 86 87 <script> 88 generate_tests(assert_equals, [ 89 [ 90 "col visibility:collapse doesn't change table height", 91 document.getElementById('two').offsetHeight, 92 document.getElementById('one').offsetHeight 93 ], 94 [ 95 "col visibility:collapse changes table width", 96 document.getElementById('two').offsetWidth, 97 116 98 ] 99 ]); 100 </script> 101 </html>