margin-collapse-clear-003-ref.xht (1668B)
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 Reftest Reference</title> 8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 9 10 <style type="text/css"><![CDATA[ 11 table 12 { 13 border-collapse: separate; 14 border-spacing: 0px; 15 } 16 17 td#first-column {padding: 0px 4px 0px 6px;} 18 19 td#second-column 20 { 21 border: black solid thin; 22 padding: 0px; 23 width: 150px; 24 } 25 26 div {height: 50px;} 27 28 div.sliver-yellow {border-left: yellow solid 10px;} 29 30 div.sliver-aqua 31 { 32 border-left: 5px solid aqua; 33 height: 20px; 34 } 35 36 div.mid-container {height: 60px;} 37 38 div.white 39 { 40 border-left: 5px solid white; 41 height: 40px; 42 } 43 44 div.sliver-orange {border-left: orange solid 10px;} 45 46 div.yellow {background-color: yellow;} 47 48 div.aqua 49 { 50 background-color: aqua; 51 height: 20px; 52 width: 20px; 53 } 54 55 div.orange {background-color: orange;} 56 ]]></style> 57 58 </head> 59 60 <body> 61 62 <p>The coloured bars on the left should match the coloured boxes in the black box.</p> 63 64 <table> 65 <tr> 66 <td id="first-column"> 67 <div class="sliver-yellow"></div> 68 <div class="mid-container"> 69 <div class="white"></div> 70 <div class="sliver-aqua"></div> 71 </div> 72 <div class="sliver-orange"></div> 73 </td> 74 <td id="second-column"> 75 <div class="yellow">A</div> 76 <div class="mid-container"> 77 <div class="white"></div> 78 <div class="aqua">B</div> 79 </div> 80 <div class="orange">C</div> 81 </td> 82 </tr> 83 </table> 84 85 </body> 86 </html>