fixed-table-layout-003e07.xht (4031B)
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-003e07-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 non-zero symetrical horizontal cell padding and with one 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 24px;} 27 28 td#tested-cell 29 { 30 background-color: blue; 31 border-left: orange solid 72px; 32 border-right: orange solid 0px; 33 color: blue; 34 width: 80px; 35 } 36 37 div#reference 38 { 39 background-color: black; 40 color: black; 41 margin-left: 82px; 42 /* 43 44 " 45 In the fixed table layout algorithm, the width of each column is determined as follows: 46 47 (...) a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. (...) 48 Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing). 49 " 50 Section 17.5.2.1 Fixed table layout 51 http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout 52 53 54 Middle column width calculations 55 -------------------------------- 56 57 36px : half of border-left since such border must be split with cell in 1st column 58 + 59 24px : padding-left of the cell in the middle column 60 + 61 80px : width of the cell in the middle column 62 + 63 24px : padding-right of the cell in the middle column 64 ======= 65 164px : width of the middle column 66 67 68 So, 69 400px : table set width 70 - 71 164px : width of the middle column 72 ====== 73 236px 74 75 So, each of the 2 remaining columns must be 76 half of such extra horizontal table space, 77 which is 236px divided by 2 == 118px. 78 79 1st column width calculations 80 ----------------------------- 81 82 24px : padding-left of cell in 1st column 83 + 84 (solve) : width of cell in 1st column 85 + 86 24px : padding-right of cell in 1st column 87 + 88 36px : half of border-left of cell in middle column 89 since such border must be split with cell in 1st column 90 ====== 91 118px : width of 1st column 92 93 So, the width of the cell in first column must be exactly 34px. 94 95 96 3rd column width calculations 97 ----------------------------- 98 99 24px : padding-left of cell in 3rd column 100 + 101 (solve) : width of cell in 3rd column 102 + 103 24px : padding-right of cell in 3rd column 104 ======= 105 118px : width of 3rd column 106 107 So, the width of the cell in 3rd column must be exactly 70px. 108 109 110 Finally, the precise horizontal point where the border-right of cell 111 in first column begins to be drawn, painted is: 112 113 24px : padding-left of cell in 1st column 114 + 115 34px : width of cell in 1st column 116 + 117 24px : padding-right of cell in 1st column 118 ======= 119 82px 120 121 Therefore the margin-left: 82px value of the div#reference. 122 123 */ 124 width: 200px; 125 } 126 ]]></style> 127 128 </head> 129 130 <body> 131 132 <p>Test passes if the orange stripe and blue stripe are as a whole <strong>exactly as wide as</strong> the black stripe.</p> 133 134 <table> 135 136 <col /> 137 <col /> 138 <col /> 139 140 <tr> 141 <td></td> 142 <td id="tested-cell">E07</td> 143 <td></td> 144 </tr> 145 146 </table> 147 148 <div id="reference">200px wide</div> 149 150 </body> 151 </html>