fixed-table-layout-021.xht (3519B)
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</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-021-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 borders or cell spacing." 33 http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout 34 35 So, 36 37 533px : total table width 38 - 39 58px : total horizontal border width 40 - 41 75px : total horizontal border-spacing width 42 ======== 43 400px : total to split among the 4 columns 44 */ 45 46 } 47 48 col#first 49 { 50 background-color: fuchsia; 51 width: 13%; 52 /* 400px multiplied by 13% = 52px */ 53 } 54 55 col#second 56 { 57 background-color: olive; 58 width: 22%; 59 /* 400px multiplied by 22% = 88px */ 60 } 61 62 col#third 63 { 64 background-color: orange; 65 width: 31%; 66 /* 400px multiplied by 31% = 124px */ 67 68 /* 69 100% - (13% + 22% + 31%) == 34% for last column 70 */ 71 } 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 div {padding: 1px 0px;} 82 83 div#reference1st 84 { 85 background-color: fuchsia; 86 color: fuchsia; 87 left: 44px; /* 29px border-left of table + 15px border-spacing == 44px */ 88 position: relative; 89 width: 52px; 90 } 91 92 div#reference2nd 93 { 94 background-color: olive; 95 bottom: 1.1em; 96 color: olive; 97 left: 111px; 98 /* 99 29px : border-left of table 100 + 101 15px : 1st border-spacing 102 + 103 52px : width of first column 104 + 105 15px : 2nd border-spacing 106 ======= 107 111px 108 */ 109 position: relative; 110 width: 88px; 111 } 112 113 div#reference3rd 114 { 115 background-color: orange; 116 bottom: 2.2em; 117 color: orange; 118 left: 214px; 119 /* 120 29px : border-left of table 121 + 122 15px : 1st border-spacing 123 + 124 52px : width of first column 125 + 126 15px : 2nd border-spacing 127 + 128 88px : width of second column 129 + 130 15px : 3rd border-spacing 131 ======= 132 214px 133 */ 134 position: relative; 135 width: 124px; 136 } 137 ]]></style> 138 139 </head> 140 141 <body> 142 143 <p>Test passes if the colored (fuchsia, olive and orange) stripes have respectively the same widths and the same horizontal positions.</p> 144 145 <table> 146 147 <col id="first"></col> 148 <col id="second"></col> 149 <col id="third"></col> 150 <col></col> 151 152 <tr> 153 <td id="first-cell">1</td> 154 <td id="second-cell">2</td> 155 <td id="third-cell">3</td> 156 <td></td> 157 </tr> 158 159 </table> 160 161 <div id="reference1st">r</div> 162 163 <div id="reference2nd">r</div> 164 165 <div id="reference3rd">r</div> 166 167 </body> 168 </html>