fixed-table-layout-022-vlr.html (4154B)
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-lr; } 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 position: relative; 69 height: 52px; 70 width: 24px; 71 } 72 div#reference2nd 73 { 74 background-color: olive; 75 color: olive; 76 right: 24px; 77 top: 111px; 78 /* 79 29px : border-top of table 80 + 81 15px : 1st border-spacing 82 + 83 52px : height of first column 84 + 85 15px border-spacing 86 ====== 87 111px 88 */ 89 position: relative; 90 height: 100px; 91 width: 24px; 92 } 93 div#reference3rd 94 { 95 background-color: orange; 96 right: 48px; 97 color: orange; 98 top: 226px; 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 100px : height of second column 109 + 110 15px : 3rd border-spacing 111 ======= 112 226px 113 */ 114 position: relative; 115 height: 124px; 116 width: 24px; 117 } 118 div#reference4th 119 { 120 background-color: lime; 121 right: 72px; 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 <table> 153 <col id="first"> 154 <col id="second"> 155 <col id="third"> 156 <col id="fourth"> 157 <tr> 158 <td id="first-cell">1st</td> 159 <td id="second-cell">2nd</td> 160 <td id="third-cell">3rd</td> 161 <td id="fourth-cell">4th</td> 162 </tr> 163 </table> 164 <div id="reference1st">ref</div> 165 <div id="reference2nd">ref</div> 166 <div id="reference3rd">ref</div> 167 <div id="reference4th">ref</div> 168 </div> 169 </body> 170 </html>