fixed-table-layout-003e11.xht (4273B)
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 - cell in the first row with specified 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" /> 11 <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2011Oct/0502.html" title="[css21] Section 17.5.2.1 should be clarified" /> 12 <link rel="match" href="fixed-table-layout-003e11-ref.xht" /> 13 14 <meta name="assert" content="A cell in the first row with specified non-auto 'width' sets the width for its column in the absence of a column element with specified non-auto width. This test checks the 'border-collapse: collapse' model with asymetrical non-zero horizontal cell padding and with asymetrical non-zero horizontal cell border." /> 15 16 <style type="text/css"><![CDATA[ 17 div, table {font: 1.25em/1.2 serif;} 18 19 table 20 { 21 border-collapse: collapse; 22 table-layout: fixed; 23 width: 400px; 24 } 25 26 td {padding: 0px 10px 0px 38px;} 27 28 td#tested-cell 29 { 30 background-color: blue; 31 border-left: orange solid 20px; 32 border-right: orange solid 52px; 33 color: blue; 34 width: 80px; 35 } 36 37 div#reference 38 { 39 background-color: black; 40 color: black; 41 margin-left: 108px; 42 43 /* 44 45 " 46 In the fixed table layout algorithm, the width of each column is determined as follows: 47 48 (...) a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. (...) 49 Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing). 50 " 51 Section 17.5.2.1 Fixed table layout 52 http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout 53 54 55 Middle column width calculations 56 -------------------------------- 57 58 10px : half of border-left since such border must be split with cell in 1st column 59 + 60 38px : padding-left of the cell in the middle column 61 + 62 80px : width of the cell in the middle column 63 + 64 10px : padding-right of the cell in the middle column 65 + 66 26px : half of border-right since such border must be split with cell in 3rd column 67 ======= 68 164px : width of the middle column 69 70 71 So, 72 400px : table set width 73 - 74 164px : width of the middle column 75 ====== 76 236px 77 78 So, each of the 2 remaining columns must be 79 half of such extra horizontal table space, 80 which is 236px divided by 2 == 118px. 81 82 1st column width calculations 83 ----------------------------- 84 85 38px : padding-left of cell in 1st column 86 + 87 (solve) : width of cell in 1st column 88 + 89 10px : padding-right of cell in 1st column 90 + 91 10px : border-right of cell in 1st column 92 which is half of border-left of cell in middle column 93 ====== 94 118px : width of 1st column 95 96 So, the width of the cell in first column must be exactly 60px. 97 98 99 3rd column width calculations 100 ----------------------------- 101 102 26px : half of border-right of cell in middle column 103 since such border must be split with the cell in 3rd column 104 + 105 24px : padding-left of cell in 3rd column 106 + 107 (solve) : width of cell in 3rd column 108 + 109 24px : padding-right of cell in 3rd column 110 ======= 111 118px : width of 3rd column 112 113 So, the width of the cell in 3rd column must be exactly 44px. 114 115 116 Finally, the precise horizontal point where the border-right of cell 117 in first column begins to be drawn, painted is: 118 119 24px : padding-left of cell in 1st column 120 + 121 60px : width of cell in 1st column 122 + 123 24px : padding-right of cell in 1st column 124 ======= 125 108px 126 127 Therefore the margin-left: 108px value of the div#reference. 128 129 */ 130 131 width: 200px; 132 } 133 ]]></style> 134 135 </head> 136 137 <body> 138 139 <p>Test passes if the 2 orange slivers and blue stripe are as a whole <strong>exactly as wide as</strong> the black stripe.</p> 140 141 <table> 142 143 <col /> 144 <col /> 145 <col /> 146 147 <tr> 148 <td></td> 149 <td id="tested-cell">E11</td> 150 <td></td> 151 </tr> 152 153 </table> 154 155 <div id="reference">200px wide</div> 156 157 </body> 158 </html>