separated-border-model-003b.xht (2146B)
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: border-collapse: separate - HTML/XHTML table set width greater than sum of columns</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#separated-borders" title="17.6.1 The separated borders model" /> 11 <link rel="match" href="separated-border-model-003b-ref.xht" /> 12 13 <meta name="assert" content="In the border-collapse: separate model, the width of an HTML/XHTML table is the distance between the left and right table border edges. If the set width of an HTML/XHTML table is greater than the sum of the columns width (plus cell spacing and table borders), then the extra (exceeding) space should be distributed over the columns." /> 14 15 <style type="text/css"><![CDATA[ 16 table 17 { 18 background-color: black; 19 border-spacing: 50px 0; 20 table-layout: fixed; 21 width: 500px; 22 } 23 24 table, td 25 { 26 border-left: black solid 11px; 27 border-right: black solid 17px; 28 padding: 25px 39px 25px 33px; 29 } 30 31 td {width: 100px;} 32 33 /* 34 35 11px (table's border-left) 36 33px (table's padding-left) 37 50px (left-most border-spacing) 38 11px (td's border-left) 39 33px (td's padding-left) 40 100px (td's set content width) 41 39px (td's padding-right) 42 17px (td's border-right) 43 50px (right-most border-spacing) 44 39px (table's padding-right) 45 17px (table's border-right) 46 ----- 47 400px 48 49 50 Since the set width (500px) for the XHTML/HTML table is greater than the 51 sum of columns width (400px), then the extra (exceeding) space is distributed 52 evenly among columns. So, here, the used width for the single td should 53 be 200px, not 100px. 54 55 */ 56 57 div 58 { 59 background-color: blue; 60 height: 100px; 61 width: 500px; 62 } 63 ]]></style> 64 65 </head> 66 67 <body> 68 69 <p>Test passes if the black and blue rectangles are the <strong>same width</strong>.</p> 70 71 <table> 72 <tr> 73 <td></td> 74 </tr> 75 </table> 76 77 <div></div> 78 79 </body> 80 </html>