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