visibility-hidden-col-001.html (2672B)
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 hidden</h1> 23 <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> 24 <p> 25 Setting a column of cells to visibility:hidden. 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></span> 51 </x-td> 52 </x-tr> 53 </x-tbody> 54 </x-table> 55 Bottom table is identical to top except right column's cells are hidden. 56 <x-table id="two"> 57 <x-tbody> 58 <x-tr> 59 <x-td> 60 <span>row 1</span> 61 </x-td> 62 <x-td style="visibility:hidden;"> 63 <span></span> 64 </x-td> 65 </x-tr> 66 <x-tr> 67 <x-td> 68 <span>row 2</span> 69 </x-td> 70 <x-td style="visibility:hidden;"> 71 <span></span> 72 </x-td> 73 </x-tr> 74 <x-tr> 75 <x-td> 76 <span>row 3</span> 77 </x-td> 78 <x-td style="visibility:hidden;"> 79 <span></span> 80 </x-td> 81 </x-tr> 82 </x-tbody> 83 </x-table> 84 </main> 85 86 <script> 87 tests = [ 88 [ 89 document.getElementById('two').offsetHeight, 90 document.getElementById('one').offsetHeight, 91 "visibility:hidden doesn't change table height" 92 ], 93 [ 94 document.getElementById('two').offsetWidth, 95 222, 96 "visibility:hidden doesn't change table width" 97 ]]; 98 99 for (i = 0; i< tests.length; i++) { 100 test(function() 101 { 102 assert_equals.apply(this, tests[i]); 103 }, 104 tests[i][2]); 105 }; 106 </script> 107 </html>