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