fixed-table-layout-023-vrl.html (4249B)
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 and absolute 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-023-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 body 14 { 15 margin: 8px; 16 height: 640px; 17 } 18 table 19 { 20 border: white solid; 21 border-width: 11px 0px; /* vertical table border height is 22px total */ 22 border-collapse: separate; 23 border-spacing: 18px 4px; /* vertical border-spacing height is 90px total */ 24 table-layout: fixed; 25 height: 80%; /* 640px mult by 80% == 512px */ 26 /* 27 "With this (fast) algorithm, the vertical layout of 28 the table does not depend on the contents of the cells; 29 it only depends on the table's height, the height of 30 the columns, and [table] borders or cell spacing." 31 So, 32 512px : total table height 33 - 34 90px : total vertical border-spacing height 35 - 36 22px : total vertical border-spacing height 37 ======== 38 400px : total to split among the 4 columns 39 */ 40 } 41 col#first 42 { 43 background-color: fuchsia; 44 height: 13%; 45 /* 400px multiplied by 13% = 52px */ 46 } 47 col#second 48 { 49 background-color: olive; 50 height: 100px; 51 } 52 col#third 53 { 54 background-color: orange; 55 height: 31%; 56 /* 400px multiplied by 31% = 124px */ 57 /* 58 400px - (52px + 100px + 124px) = 124px for last column 59 */ 60 } 61 col#fourth {background-color: lime;} 62 td {padding: 10px 0px; width: 24px; } 63 td#first-cell {color: fuchsia;} 64 td#second-cell {color: olive;} 65 td#third-cell {color: orange;} 66 td#fourth-cell {color: lime;} 67 div {padding: 0px;} 68 div#reference1st 69 { 70 background-color: fuchsia; 71 color: fuchsia; 72 top: 29px; /* 11px border-top of table + 18px border-spacing == 29px */ 73 right: 72px; 74 position: relative; 75 height: 52px; 76 width: 24px; 77 } 78 div#reference2nd 79 { 80 background-color: olive; 81 right: 48px; 82 color: olive; 83 top: 99px; 84 /* 85 11px : border-top of table 86 + 87 18px : 1st border-spacing 88 + 89 52px : height of first column 90 + 91 18px : 2nd border-spacing 92 ======= 93 99px 94 */ 95 position: relative; 96 height: 100px; 97 width: 24px; 98 } 99 div#reference3rd 100 { 101 background-color: orange; 102 right: 24px; 103 color: orange; 104 top: 217px; 105 /* 106 11px : border-top of table 107 + 108 18px : 1st border-spacing 109 + 110 52px : height of first column 111 + 112 18px : 2nd border-spacing 113 + 114 100px : height of second column 115 + 116 18px : 3rd border-spacing 117 ======= 118 217px 119 */ 120 position: relative; 121 height: 124px; 122 width: 24px; 123 } 124 div#reference4th 125 { 126 background-color: lime; 127 color: lime; 128 top: 359px; 129 /* 130 11px : border-top of table 131 + 132 18px : 1st border-spacing 133 + 134 52px : height of first column 135 + 136 18px : 2nd border-spacing 137 + 138 100px : height of second column 139 + 140 18px : 3rd border-spacing 141 + 142 124px : height of third column 143 + 144 18px : 4th border-spacing 145 ======= 146 359px 147 */ 148 position: relative; 149 height: 124px; 150 width: 24px; 151 } 152 </style> 153 </head> 154 <body> 155 <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same heights and the same vertical positions.</p> 156 <div class="test"> 157 <div id="reference1st">ref</div> 158 <div id="reference2nd">ref</div> 159 <div id="reference3rd">ref</div> 160 <div id="reference4th">ref</div> 161 <table> 162 <col id="first"> 163 <col id="second"> 164 <col id="third"> 165 <col id="fourth"> 166 <tr> 167 <td id="first-cell">1st</td> 168 <td id="second-cell">2nd</td> 169 <td id="third-cell">3rd</td> 170 <td id="fourth-cell">4th</td> 171 </tr> 172 </table> 173 </div> 174 </body> 175 </html>