| <html> |
| <head> |
| <title>Row background image extent</title> |
| <style>* { box-sizing: border-box }</style> |
| </head> |
| <body> |
| <p>A background applied to a table row (or row-group or column or column-group) should cover the whole area of contained cells, including borders. The two dashed squares should look identical.</p> |
| |
| <table style="width: 100px; border-spacing: 0; margin-bottom: 1em"> |
| <tr style="background-image: linear-gradient(to bottom right, royalblue 0, black 100%)"> |
| <td style="width: 100px; height: 100px; border: 5px dashed aqua"></td> |
| </tr> |
| </table> |
| |
| <div style="background: linear-gradient(to bottom right, royalblue 0, black 100%); width: 100px; height: 100px"> |
| <div style="border: 5px dashed aqua; width: 100px; height: 100px"> |
| </div> |
| </div> |
| </body> |
| </html> |
