border-separate-opacity-table.html (3713B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="en-US"> 4 <head> 5 <title>Table background tests</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <meta http-equiv="Content-Style-Type" content="text/css"> 8 <style type="text/css"> 9 10 html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } 11 body { padding: 15px; } 12 13 .o { opacity: 0.5; } 14 15 table { 16 margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ 17 border: transparent solid; 18 border-width: 4px 2px 7px 3px; 19 padding: 3px 7px 8px 6px; 20 border-collapse: separate; 21 border-spacing: 2px 3px; 22 } 23 24 td { 25 border: transparent solid; 26 border-width: 2px 1px 4px 3px; 27 padding: 1px 2px 4px 3px; 28 empty-cells: show; 29 } 30 31 div { height: 10px; width: 50px; } 32 33 table.color { background-color: aqua; } 34 35 table.imagetl, table.imagebr { 36 background-image: url(repeatable-diagonal-gradient-with-ticks.png); 37 } 38 39 table.imagetl { background-position: top left; /* default */ } 40 table.imagebr { background-position: bottom right; /* default */ } 41 42 </style> 43 </head> 44 <body> 45 46 <table class="color"> 47 <colgroup><col></colgroup> 48 <colgroup class="t o"> 49 <col> 50 <col class="t o"> 51 <col> 52 </colgroup> 53 <colgroup><col></colgroup> 54 <tbody> 55 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 56 </tbody> 57 <tbody class="t o"> 58 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 59 <tr class="t o"><td><div></div></td><td><div></div></td><td class="t o"><div></div></td><td><div></div></td><td><div></div></td></tr> 60 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 61 </tbody> 62 <tbody> 63 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 64 </tbody> 65 </table> 66 67 <table class="imagetl o"> 68 <colgroup><col></colgroup> 69 <colgroup class="t"> 70 <col> 71 <col class="t"> 72 <col> 73 </colgroup> 74 <colgroup><col></colgroup> 75 <tbody> 76 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 77 </tbody> 78 <tbody class="t"> 79 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 80 <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> 81 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 82 </tbody> 83 <tbody> 84 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 85 </tbody> 86 </table> 87 88 <table class="imagebr o"> 89 <colgroup><col></colgroup> 90 <colgroup class="t"> 91 <col> 92 <col class="t"> 93 <col> 94 </colgroup> 95 <colgroup><col></colgroup> 96 <tbody> 97 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 98 </tbody> 99 <tbody class="t"> 100 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 101 <tr class="t"><td><div></div></td><td><div></div></td><td class="t"><div></div></td><td><div></div></td><td><div></div></td></tr> 102 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 103 </tbody> 104 <tbody> 105 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 106 </tbody> 107 </table> 108 109 </body> 110 </html>