fixed-table-layout-021-vrl.html (3607B)
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-021-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, predicted, rendered." name="assert"> 11 <style type="text/css"> 12 div.test { writing-mode: vertical-rl; } 13 table 14 { 15 border: white solid; 16 border-width: 29px 0px; /* vertical table border height is 58px total */ 17 border-collapse: separate; 18 border-spacing: 15px 4px; /* vertical border-spacing height is 75px total */ 19 table-layout: fixed; 20 height: 533px; 21 /* 22 "With this (fast) algorithm, the vertical layout of 23 the table does not depend on the contents of the cells; 24 it only depends on the table's height, the height of 25 the columns, and borders or cell spacing." 26 http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout 27 So, 28 533px : total table height 29 - 30 58px : total vertical border height 31 - 32 75px : total vertical border-spacing height 33 ======== 34 400px : total to split among the 4 columns 35 */ 36 } 37 col#first 38 { 39 background-color: fuchsia; 40 height: 13%; 41 /* 400px multiplied by 13% = 52px */ 42 } 43 col#second 44 { 45 background-color: olive; 46 height: 22%; 47 /* 400px multiplied by 22% = 88px */ 48 } 49 col#third 50 { 51 background-color: orange; 52 height: 31%; 53 /* 400px multiplied by 31% = 124px */ 54 /* 55 100% - (13% + 22% + 31%) == 34% for last column 56 */ 57 } 58 td {padding: 10px 0px; width: 24px; } 59 td#first-cell {color: fuchsia;} 60 td#second-cell {color: olive;} 61 td#third-cell {color: orange;} 62 div {padding: 0px; } 63 div#reference1st 64 { 65 background-color: fuchsia; 66 color: fuchsia; 67 right: 48px; 68 top: 44px; /* 29px border-top of table + 15px border-spacing == 44px */ 69 position: relative; 70 height: 52px; 71 width: 24px; 72 } 73 div#reference2nd 74 { 75 background-color: olive; 76 color: olive; 77 right: 24px; 78 top: 111px; 79 /* 80 29px : border-top of table 81 + 82 15px : 1st border-spacing 83 + 84 52px : height of first column 85 + 86 15px : 2nd border-spacing 87 ======= 88 111px 89 */ 90 position: relative; 91 height: 88px; 92 width: 24px; 93 } 94 div#reference3rd 95 { 96 background-color: orange; 97 color: orange; 98 top: 214px; 99 /* 100 29px : border-top of table 101 + 102 15px : 1st border-spacing 103 + 104 52px : height of first column 105 + 106 15px : 2nd border-spacing 107 + 108 88px : height of second column 109 + 110 15px : 3rd border-spacing 111 ======= 112 214px 113 */ 114 position: relative; 115 height: 124px; 116 width: 24px; 117 } 118 </style> 119 </head> 120 <body> 121 <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same heights and the same vertical positions.</p> 122 <div class="test"> 123 <div id="reference1st">ref</div> 124 <div id="reference2nd">ref</div> 125 <div id="reference3rd">ref</div> 126 <table> 127 <col id="first"> 128 <col id="second"> 129 <col id="third"> 130 <col> 131 <tr> 132 <td id="first-cell">1st</td> 133 <td id="second-cell">2nd</td> 134 <td id="third-cell">3rd</td> 135 <td></td> 136 </tr> 137 </table> 138 </div> 139 </body> 140 </html>