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