fixed-table-layout-003f01.xht (3629B)
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-003f01-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 zero horizontal cell padding and with non-zero symetrical 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: 400px; 24 } 25 26 td {padding: 0px;} 27 28 td#tested-cell 29 { 30 background-color: blue; 31 border-left: orange solid 60px; 32 border-right: orange solid 60px; 33 color: blue; 34 width: 80px; 35 } 36 37 div#reference 38 { 39 background-color: black; 40 color: black; 41 margin-left: 100px; 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 30px : half of border-left since such border must be split with cell in 1st column 59 + 60 80px : width of cell in the middle column 61 + 62 30px : half of border-right since such border must be split with cell in 3rd column 63 64 ======= 65 140px : width of the middle column 66 67 68 So, 69 400px : table set width 70 - 71 140px : width of the middle column 72 ====== 73 260px 74 75 So, each of the 2 remaining columns must be 76 half of such extra horizontal table space, 77 which is 260px divided by 2 == 130px. 78 79 1st column width calculations 80 ----------------------------- 81 82 (solve) : width of cell in 1st column 83 + 84 30px : border-right of cell in 1st column 85 ====== 86 130px : width of 1st column 87 88 So, the width of the cell in first column must be exactly 100px. 89 90 91 3rd column width calculations 92 ----------------------------- 93 94 30px : border-left of cell in 3rd column 95 + 96 (solve) : width of cell in 3rd column 97 ======= 98 130px : width of 3rd column 99 100 So, the width of the cell in 3rd column must be exactly 100px. 101 102 103 Finally, the precise horizontal point where the border-right of cell 104 in first column begins to be drawn, painted is: 105 106 100px : width of cell in 1st column 107 108 Therefore the margin-left: 100px value of the div#reference. 109 110 */ 111 112 width: 200px; 113 } 114 ]]></style> 115 116 </head> 117 118 <body> 119 120 <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> 121 122 <table> 123 124 <col /> 125 <col /> 126 <col /> 127 128 <tr> 129 <td></td> 130 <td id="tested-cell">F01</td> 131 <td></td> 132 </tr> 133 134 </table> 135 136 <div id="reference">200px wide</div> 137 138 </body> 139 </html>