fixed-layout-excess-width-distribution-001.html (1103B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/check-layout-th.js"></script> 5 <link rel="author" title="David Grogan" href="dgrogan@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-tables-3/#distributing-width-to-columns"> 7 8 <style> 9 table { 10 width: 300px; 11 border-collapse: collapse; 12 table-layout: fixed; 13 height: 20px; 14 } 15 16 td { 17 padding: 0px; 18 background: lime; 19 outline: 1px solid blue; 20 } 21 22 td:nth-child(1) { width: 20px; } 23 td:nth-child(2) { width: 10px; } 24 td:nth-child(3) { width: 10%; } 25 </style> 26 27 <h2>Fixed layout tables with excess width and no auto columns</h2> 28 29 FF/Edge give excess only to fixed columns, in proportion to their relative 30 widths. This is what the spec dictates. 31 <br>Chrome (62) gives excess to ALL columns, in proportion to their 32 contribution to total width. 33 <table id=theTable> 34 <tr> 35 <td data-expected-width=180></td> 36 <td data-expected-width=90></td> 37 <td data-expected-width=30></td> 38 </tr> 39 </table> 40 41 <script> 42 checkLayout('#theTable') 43 </script>