border-separate-table-column-group.html (4025B)
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>CSS 2.1 Test Suite: table backgrounds</title> 6 <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> 7 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/tables.html#table-layers"/> 9 <meta name="flags" content="" /> 10 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 11 <meta http-equiv="Content-Style-Type" content="text/css"> 12 <style type="text/css"> 13 14 html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } 15 body { padding: 15px; } 16 17 table { 18 margin: 0 3px 2px 4px; /* zero top to work around collapsing bug */ 19 border: transparent solid; 20 border-width: 4px 2px 7px 3px; 21 padding: 3px 7px 8px 6px; 22 border-collapse: separate; 23 border-spacing: 2px 3px; 24 } 25 26 td { 27 border: transparent solid; 28 border-width: 2px 1px 4px 3px; 29 padding: 1px 2px 4px 3px; 30 empty-cells: show; 31 } 32 33 div { height: 10px; width: 50px; } 34 35 table.color colgroup.t { background-color: aqua; } 36 37 table.imagetl colgroup.t, table.imagebr colgroup.t { 38 background-image: url(repeatable-diagonal-gradient-with-ticks.png); 39 } 40 41 table.imagetl colgroup.t { background-position: top left; /* default */ } 42 table.imagebr colgroup.t { background-position: bottom right; /* default */ } 43 44 </style> 45 </head> 46 <body> 47 48 <table class="color"> 49 <colgroup><col></colgroup> 50 <colgroup class="t"> 51 <col> 52 <col class="t"> 53 <col> 54 </colgroup> 55 <colgroup><col></colgroup> 56 <tbody> 57 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 58 </tbody> 59 <tbody class="t"> 60 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 61 <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> 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 <tbody> 65 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 66 </tbody> 67 </table> 68 69 <table class="imagetl"> 70 <colgroup><col></colgroup> 71 <colgroup class="t"> 72 <col> 73 <col class="t"> 74 <col> 75 </colgroup> 76 <colgroup><col></colgroup> 77 <tbody> 78 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 79 </tbody> 80 <tbody class="t"> 81 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 82 <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> 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 <tbody> 86 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 87 </tbody> 88 </table> 89 90 <table class="imagebr"> 91 <colgroup><col></colgroup> 92 <colgroup class="t"> 93 <col> 94 <col class="t"> 95 <col> 96 </colgroup> 97 <colgroup><col></colgroup> 98 <tbody> 99 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 100 </tbody> 101 <tbody class="t"> 102 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 103 <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> 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 <tbody> 107 <tr><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td><td><div></div></td></tr> 108 </tbody> 109 </table> 110 111 </body> 112 </html>