background-image-column-collapsed.html (1502B)
1 <!DOCTYPE html> 2 <title>Table collapsed column background image geometry</title> 3 <link rel="author" title="Aleks Totic" href="atotic@chromium.org" /> 4 <link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" /> 5 <link rel="match" href="background-image-column-collapsed-ref.html" /> 6 <style> 7 body { 8 --peek: LightGreen; 9 } 10 .bg { 11 background-color: var(--peek); 12 background-image: linear-gradient(90deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 170px, blue 170px); 13 background-repeat: no-repeat; 14 } 15 main * { 16 box-sizing: border-box; 17 } 18 main table { 19 border-spacing: 10px; 20 border: 10px solid transparent; 21 padding: 10px; 22 border-collapse: collapse; 23 } 24 main table:hover { 25 border: 10px solid yellow; 26 } 27 main td { 28 width: 50px; 29 height: 50px; 30 padding: 0px; 31 } 32 </style> 33 <body> 34 <main> 35 <table> 36 <col class="bg"> 37 <col class="bg"> 38 <col> 39 <colgroup class="bg" span="2"> 40 <tr> 41 <td rowspan=4></td> 42 <td></td> 43 <td></td> 44 <td></td> 45 <td></td> 46 <td></td> 47 </tr> 48 <tr> 49 <td rowspan=2 colspan=2></td> 50 <td></td> 51 <td></td> 52 <td></td> 53 </tr> 54 <tr> 55 <td></td> 56 <td></td> 57 <td></td> 58 </tr> 59 <tr> 60 <td></td> 61 <td></td> 62 <td></td> 63 <td></td> 64 <td></td> 65 </tr> 66 </table> 67 </main> 68 </body>