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