background-image-row-collapsed.html (1252B)
1 <!DOCTYPE html> 2 <title>Collapsed table row 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-row-collapsed-ref.html" /> 6 <style> 7 body { 8 --peek: LightGreen; 9 --border: transparent; 10 margin:0; 11 } 12 .bg { 13 background-color: var(--peek); 14 background-image: linear-gradient(45deg, orange 0px, orange 5px, 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 99%, blue 99%); 15 background-repeat: no-repeat; 16 } 17 main * { 18 box-sizing: border-box; 19 } 20 main table { 21 border: 10px solid var(--border); 22 border-collapse: collapse; 23 } 24 main td { 25 width: 50px; 26 height: 50px; 27 padding: 0px; 28 } 29 </style> 30 <body> 31 <main> 32 <table> 33 <tr class="bg"> 34 <td colspan=4></td> 35 </tr> 36 <tr class="bg"> 37 <td></td> 38 <td rowspan=2 colspan=2></td> 39 <td></td> 40 </tr> 41 <tr> 42 <td></td> 43 <td></td> 44 </tr> 45 <tr class="bg"> 46 <td></td> 47 <td></td> 48 <td></td> 49 <td></td> 50 </tr> 51 </table> 52 </main> 53 </body>