border-collapse-opacity-table.html (3730B)
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 8px 6px; /* collapsed */ 19 padding: 3px 7px 8px 6px; /* ignored */ 20 border-collapse: collapse; 21 } 22 23 td { 24 border: transparent solid; 25 border-width: 2px 0 4px 2px; /* collapsed */ 26 padding: 1px 2px 4px 3px; 27 empty-cells: show; 28 } 29 30 div { height: 10px; width: 50px; } 31 32 table.color { background-color: aqua; } 33 34 table.imagetl, table.imagebr { 35 background-image: url(repeatable-diagonal-gradient-with-ticks.png); 36 } 37 38 table.imagetl { background-position: top left; /* default */ } 39 table.imagebr { background-position: bottom right; /* default */ } 40 41 </style> 42 </head> 43 <body> 44 45 <table class="color o"> 46 <colgroup><col></colgroup> 47 <colgroup class="t"> 48 <col> 49 <col class="t"> 50 <col> 51 </colgroup> 52 <colgroup><col></colgroup> 53 <tbody> 54 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 55 </tbody> 56 <tbody class="t"> 57 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 58 <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> 59 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 60 </tbody> 61 <tbody> 62 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 63 </tbody> 64 </table> 65 66 <table class="imagetl o"> 67 <colgroup><col></colgroup> 68 <colgroup class="t"> 69 <col> 70 <col class="t"> 71 <col> 72 </colgroup> 73 <colgroup><col></colgroup> 74 <tbody> 75 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 76 </tbody> 77 <tbody class="t"> 78 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 79 <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> 80 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 81 </tbody> 82 <tbody> 83 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 84 </tbody> 85 </table> 86 87 <table class="imagebr"> 88 <colgroup><col></colgroup> 89 <colgroup class="t o"> 90 <col> 91 <col class="t o"> 92 <col> 93 </colgroup> 94 <colgroup><col></colgroup> 95 <tbody> 96 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 97 </tbody> 98 <tbody class="t o"> 99 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 100 <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> 101 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 102 </tbody> 103 <tbody> 104 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 105 </tbody> 106 </table> 107 108 </body> 109 </html>