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