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