fixed-table-layout-023.xht (4134B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Test: table-layout fixed - columns with percentage width and absolute width</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout" title="17.5.2.1 Fixed table layout" /> 11 <link rel="match" href="fixed-table-layout-023-ref.xht" /> 12 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 13 14 <meta content="A column with a percentage width in a 'table-layout: fixed' table can be calculated, predicted, rendered." name="assert" /> 15 16 <style type="text/css"><![CDATA[ 17 body 18 { 19 margin: 8px; 20 width: 640px; 21 } 22 23 table, div {font: 1.25em/1 Ahem;} 24 25 table 26 { 27 border: white solid; 28 border-width: 0px 11px; /* horizontal table border width is 22px total */ 29 border-collapse: separate; 30 border-spacing: 18px 4px; /* horizontal border-spacing width is 90px total */ 31 table-layout: fixed; 32 width: 80%; /* 640px mult by 80% == 512px */ 33 34 /* 35 "With this (fast) algorithm, the horizontal layout of 36 the table does not depend on the contents of the cells; 37 it only depends on the table's width, the width of 38 the columns, and [table] borders or cell spacing." 39 40 So, 41 42 512px : total table width 43 - 44 90px : total horizontal border-spacing width 45 - 46 22px : total horizontal border-spacing width 47 ======== 48 400px : total to split among the 4 columns 49 */ 50 51 } 52 53 col#first 54 { 55 background-color: fuchsia; 56 width: 13%; 57 /* 400px multiplied by 13% = 52px */ 58 } 59 60 col#second 61 { 62 background-color: olive; 63 width: 100px; 64 } 65 66 col#third 67 { 68 background-color: orange; 69 width: 31%; 70 /* 400px multiplied by 31% = 124px */ 71 72 /* 73 400px - (52px + 100px + 124px) = 124px for last column 74 */ 75 } 76 77 col#fourth {background-color: lime;} 78 79 td {padding: 1px 10px;} 80 81 td#first-cell {color: fuchsia;} 82 83 td#second-cell {color: olive;} 84 85 td#third-cell {color: orange;} 86 87 td#fourth-cell {color: lime;} 88 89 div {padding: 1px 0px;} 90 91 div#reference1st 92 { 93 background-color: fuchsia; 94 color: fuchsia; 95 left: 29px; /* 11px border-left of table + 18px border-spacing == 29px */ 96 position: relative; 97 width: 52px; 98 } 99 100 div#reference2nd 101 { 102 background-color: olive; 103 bottom: 1.1em; 104 color: olive; 105 left: 99px; 106 /* 107 11px : border-left of table 108 + 109 18px : 1st border-spacing 110 + 111 52px : width of first column 112 + 113 18px : 2nd border-spacing 114 ======= 115 99px 116 */ 117 position: relative; 118 width: 100px; 119 } 120 121 div#reference3rd 122 { 123 background-color: orange; 124 bottom: 2.2em; 125 color: orange; 126 left: 217px; 127 /* 128 11px : border-left of table 129 + 130 18px : 1st border-spacing 131 + 132 52px : width of first column 133 + 134 18px : 2nd border-spacing 135 + 136 100px : width of second column 137 + 138 18px : 3rd border-spacing 139 ======= 140 217px 141 */ 142 position: relative; 143 width: 124px; 144 } 145 146 div#reference4th 147 { 148 background-color: lime; 149 bottom: 3.3em; 150 color: lime; 151 left: 359px; 152 /* 153 11px : border-left of table 154 + 155 18px : 1st border-spacing 156 + 157 52px : width of first column 158 + 159 18px : 2nd border-spacing 160 + 161 100px : width of second column 162 + 163 18px : 3rd border-spacing 164 + 165 124px : width of third column 166 + 167 18px : 4th border-spacing 168 ======= 169 359px 170 */ 171 position: relative; 172 width: 124px; 173 } 174 ]]></style> 175 176 </head> 177 178 <body> 179 180 <p>Test passes if the colored (fuchsia, olive, orange and lime) stripes have respectively the same widths and the same horizontal positions.</p> 181 182 <table> 183 184 <col id="first"></col> 185 <col id="second"></col> 186 <col id="third"></col> 187 <col id="fourth"></col> 188 189 <tr> 190 <td id="first-cell">1</td> 191 <td id="second-cell">2</td> 192 <td id="third-cell">3</td> 193 <td id="fourth-cell">4</td> 194 </tr> 195 196 </table> 197 198 <div id="reference1st">r</div> 199 200 <div id="reference2nd">r</div> 201 202 <div id="reference3rd">r</div> 203 204 <div id="reference4th">r</div> 205 206 </body> 207 </html>