separated-border-model-004c.xht (2227B)
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="../reference/ref-filled-green-100px-square.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#overlapped-red 17 { 18 background-color: red; 19 height: 100px; 20 position: absolute; 21 width: 100px; 22 z-index: -1; 23 } 24 25 div#overlapping-green-table 26 { 27 background-color: green; 28 border-collapse: separate; 29 border-spacing: 1em; 30 color: green; 31 display: table; 32 font: 20px/1 serif; 33 table-layout: fixed; 34 width: 70px; 35 /* 36 The width of a CSS table is given by the greater of the value of 37 the 'width' property as set for the CSS table and the sum of the columns 38 width (plus border spacing): 39 40 max(set width, sum of columns width plus border spacing) 41 42 The set width (70px) is smaller than sum of columns width plus border 43 spacing 44 45 20px : left-most border-spacing 46 + 47 20px : div.td's width 48 + 49 20px : middle border-spacing between 1st and 2nd cell 50 + 51 20px : div.td's width 52 + 53 20px : right-most border-spacing 54 ======= 55 100px : sum of columns plus border spacing 56 */ 57 } 58 59 div.tr {display: table-row;} 60 61 div.td 62 { 63 display: table-cell; 64 width: 1em; 65 } 66 ]]></style> 67 68 </head> 69 70 <body> 71 72 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 73 74 <div id="overlapped-red"></div> 75 76 <div id="overlapping-green-table"> 77 <div class="tr"> 78 <div class="td">1</div><div class="td">2</div> 79 </div> 80 <div class="tr"> 81 <div class="td">3</div><div class="td">4</div> 82 </div> 83 </div> 84 85 </body> 86 </html>