fixed-table-layout-018-vrl.html (2522B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <title>CSS Test: table-layout fixed - columns with percentage height</title> 5 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 6 <link rel="author" title="Adapted for vertical layout by Simon Montagu" href="http:/mozilla.org/"> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout"> 8 <link rel="match" href="fixed-table-layout-017-ref.htm"> 9 <meta content="" name="flags"> 10 <meta content="A column with a percentage height in a 'table-layout: fixed' table can be calculated and predicted when in 'border-collapse: separate' model." name="assert"> 11 <style type="text/css"> 12 div.test { writing-mode: vertical-rl; } 13 table 14 { 15 border: solid white; 16 border-width: 6px 0px; 17 border-collapse: separate; 18 border-spacing: 2px 4px; 19 table-layout: fixed; 20 height: 422px; 21 } 22 col#test 23 { 24 background-color: orange; 25 height: 40%; 26 } 27 td#third-cell {color: orange;} 28 td {padding: 0px;} 29 td { width: 24px; } 30 div#reference 31 { 32 background-color: blue; 33 color: blue; 34 width: 24px; 35 top: 172px; 36 /* 37 3 vertical border-spacing and the table 38 border-left separate the start 39 of table box and the start of 3rd column. 40 The first 2 columns should each be 80px exactly 41 since "Any remaining columns equally divide the 42 remaining vertical table space (minus [table] borders or 43 cell spacing)." So: 44 6px : table border-left 45 + 46 2px : 1st border-spacing 47 + 48 80px : 1st column : (422 - 10 - 12) mult by (60% divided by 3) 49 + 50 2px : 2nd border-spacing 51 + 52 80px : 2nd column : (422 - 10 - 12) mult by (60% divided by 3) 53 + 54 2px : 3rd border-spacing 55 ========= 56 172px 57 */ 58 position: relative; 59 height: 160px; 60 /* 61 422px : total height of table 62 - 63 12px : total height of vertical borders of table 64 - 65 10px : 5 times vertical border-spacing 66 ======== 67 400px 68 mult by 69 40% 70 ======== 71 160px 72 */ 73 } 74 </style> 75 </head> 76 <body> 77 <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> 78 <div class="test"> 79 <div id="reference">ref</div> 80 <table> 81 <col> 82 <col> 83 <col id="test"> 84 <col> 85 <tr> 86 <td></td> 87 <td></td> 88 <td id="third-cell">col</td> 89 <td></td> 90 </tr> 91 </table> 92 </div> 93 </body> 94 </html>