background-image-row.html (1392B)
1 <!DOCTYPE html> 2 <title>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-ref.html" /> 6 <meta name="assert" content="Row backgrounds get painted into cells with correct geometry."> 7 <style> 8 body { 9 --peek: LightGreen; 10 } 11 .bg { 12 background-color: var(--peek); 13 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%); 14 background-size: 230px 50px; 15 background-repeat: no-repeat; 16 /* FF sometimes defaults to no-repeat for background images */ 17 } 18 main > * { 19 box-sizing: border-box; 20 } 21 main table { 22 border-spacing: 10px; 23 border: 10px solid yellow; 24 padding: 10px; 25 } 26 main td { 27 width: 50px; 28 height: 50px; 29 padding: 0px; 30 } 31 </style> 32 <body> 33 <main> 34 <table> 35 <tr class="bg"> 36 <td colspan=4></td> 37 </tr> 38 <tr class="bg"> 39 <td></td> 40 <td rowspan=2 colspan=2></td> 41 <td></td> 42 </tr> 43 <tr> 44 <td></td> 45 <td></td> 46 </tr> 47 <tr class="bg"> 48 <td></td> 49 <td></td> 50 <td></td> 51 <td></td> 52 </tr> 53 </table> 54 </main> 55 </body>