separated-border-model-004e.xht (2815B)
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: width of CSS table in border-collapse separate model</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-004e-ref.xht" /> 12 13 <meta content="The width of a CSS table is the distance from the left inner padding edge to the right inner padding edge (including the table border-spacing but excluding table padding and table borders)." name="assert" /> 14 15 <style type="text/css"><![CDATA[ 16 div#table 17 { 18 border-left: 100px solid white; 19 border-right: 100px solid white; 20 border-spacing: 52px 0; 21 display: table; 22 padding: 0 33px; 23 width: 200px; 24 /* 25 The width of a CSS table is the distance from the left inner padding 26 edge to the right inner padding edge (including the table border-spacing 27 but excluding table padding and table borders). 28 29 Therefore the 'padding: 0 33px;' is not involved in the used width 30 calculation and 'border-left: 100px solid white;' and 31 'border-right: 100px solid white;' are not involved in the used 32 width calculation. 33 34 The width of a CSS table is given by the greater of the value of 35 the 'width' property as set for the CSS table and the sum of the columns 36 width (plus border spacing): 37 38 max(set width, sum of columns width plus border spacing) 39 40 Here, the set width is 200px. 41 42 The sums of columns' width plus border spacing is given by: 43 44 52px (left-most border-spacing) 45 + 46 0px (div#td's width) 47 + 48 52px (right-most border-spacing) 49 ====== 50 104px : sum of columns plus border spacing 51 52 200px (set width of table) 53 - 54 104px (sum of columns plus border spacing) 55 ===== 56 96px : such extra (exceeding) 96px width will be distributed over 57 the columns, therefore given to the unique cell of such div#table 58 59 So, the div#td should be 96px wide, 16px tall and painted black. 60 */ 61 } 62 63 div#tr {display: table-row;} 64 65 div#td 66 { 67 background-color: black; 68 display: table-cell; 69 height: 1em; 70 } 71 72 div#reference 73 { 74 background-color: blue; 75 height: 1em; 76 left: 185px; 77 /* 78 100px : table's border-left 79 33px : table's padding-left 80 52px : left-most border-spacing 81 ----- 82 185px 83 */ 84 margin-top: 10px; 85 position: relative; 86 width: 96px; 87 } 88 ]]></style> 89 90 </head> 91 92 <body> 93 94 <p>Test passes if the black and blue stripes have the <strong>same width</strong>.</p> 95 96 <div id="table"> 97 <div id="tr"> 98 <div id="td"></div> 99 </div> 100 </div> 101 102 <div id="reference"></div> 103 104 </body> 105 </html>