<!doctype html> <meta charset="utf-8"> <script src='/resources/testharness.js'></script> <script src='/resources/testharnessreport.js'></script> <link rel="author" title="Joy Yu" href="mailto:joysyu@mit.edu"> <link rel="help" href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width"> <style> td { padding: 0; } </style> <h1>Visibility collapse</h1> <a href="https://drafts.csswg.org/css-tables-3/#computing-the-table-width">Spec</a> <p> Setting a spanning column to visibility:collapse changes table width but not height. The right two columns here have been collapsed. </p> <table id="test" style="border-collapse: collapse;"> <colgroup> <col style="background:#00F"/> <col span="2" style="background:#F00; visibility: collapse"/> </colgroup> <tbody> <tr> <td><div style="width: 100px; height: 100px"></div></td> <td><div style="width: 10px; height: 10px"></div></td> <td><div style="width: 1px; height: 1px"></div></td> </tr> <tr> <td><div style="width: 100px; height: 100px"></div></td> <td><div style="width: 10px; height: 10px"></div></td> <td><div style="width: 1px; height: 1px"></div></td> </tr> </tbody> </table> <script> tests = [ [ document.getElementById('test').offsetHeight, 200, "col visibility:collapse doesn't change table height", ], [ document.getElementById('test').offsetWidth, 100, "col visibility:collapse changes table width" ]]; for (i = 0; i< tests.length; i++) { test(function() { assert_equals.apply(this, tests[i]); }, tests[i][2]); }; </script>