fixed-table-layout-018-vlr.html (2513B)
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-lr; } 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; width: 24px;} 29 div#reference 30 { 31 background-color: blue; 32 color: blue; 33 top: 172px; 34 width: 24px; 35 /* 36 3 vertical border-spacing and the table 37 border-left separate the start 38 of table box and the start of 3rd column. 39 The first 2 columns should each be 80px exactly 40 since "Any remaining columns equally divide the 41 remaining vertical table space (minus [table] borders or 42 cell spacing)." So: 43 6px : table border-left 44 + 45 2px : 1st border-spacing 46 + 47 80px : 1st column : (422 - 10 - 12) mult by (60% divided by 3) 48 + 49 2px : 2nd border-spacing 50 + 51 80px : 2nd column : (422 - 10 - 12) mult by (60% divided by 3) 52 + 53 2px : 3rd border-spacing 54 ========= 55 172px 56 */ 57 position: relative; 58 height: 160px; 59 /* 60 422px : total height of table 61 - 62 12px : total height of vertical borders of table 63 - 64 10px : 5 times vertical border-spacing 65 ======== 66 400px 67 mult by 68 40% 69 ======== 70 160px 71 */ 72 } 73 </style> 74 </head> 75 <body> 76 <p>Test passes if the orange stripe is exactly as high as the blue stripe and is vertically positioned the same.</p> 77 <div class="test"> 78 <table> 79 <col> 80 <col> 81 <col id="test"> 82 <col> 83 <tr> 84 <td></td> 85 <td></td> 86 <td id="third-cell">col</td> 87 <td></td> 88 </tr> 89 </table> 90 <div id="reference">ref</div> 91 </div> 92 </body> 93 </html>