fixed-table-layout-003e12.xht (4105B)
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-003e12-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 borders." /> 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: 300px; 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: 58px; 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 cell in the middle column 61 + 62 80px : width of cell in the middle column 63 + 64 10px : padding-right of 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 ======= 69 164px : width of the middle column 70 71 72 So, 73 300px : table set width 74 - 75 164px : width of the middle column 76 ====== 77 136px 78 79 So, each of the 2 remaining columns must be 80 half of such extra horizontal table space, 81 which is 136px divided by 2 == 68px. 82 83 1st column width calculations 84 ----------------------------- 85 86 38px : padding-left of cell in 1st column 87 + 88 (solve) : width of cell in 1st column 89 + 90 10px : padding-right of cell in 1st column 91 + 92 10px : border-right of cell in 1st column 93 ====== 94 68px : width of 1st column 95 96 So, the width of the cell in first column must be exactly 10px. 97 98 99 3rd column width calculations 100 ----------------------------- 101 102 26px : border-left of cell in 3rd column 103 + 104 38px : padding-left of cell in 3rd column 105 + 106 (solve) : width of cell in 3rd column 107 + 108 10px : padding-right of cell in 3rd column 109 ======= 110 68px : width of 3rd column 111 112 So, the width of the cell in 3rd column must be exactly -6px ! 113 114 115 Finally, the precise horizontal point where the border-right of cell 116 in first column begins to be drawn, painted is: 117 118 38px : padding left of cell in 1st column 119 + 120 10px : width of cell in 1st column 121 + 122 10px : padding right of cell in 1st column 123 ======= 124 58px 125 126 Therefore the margin-left: 58px value of the div#reference. 127 128 */ 129 130 width: 200px; 131 } 132 ]]></style> 133 134 </head> 135 136 <body> 137 138 <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> 139 140 <table> 141 142 <col /> 143 <col /> 144 <col /> 145 146 <tr> 147 <td></td> 148 <td id="tested-cell">E12</td> 149 <td></td> 150 </tr> 151 152 </table> 153 154 <div id="reference">200px wide</div> 155 156 </body> 157 </html>