I would like to highlight some cells in a table by underlying them with hatching patterns.
If two cells with the same pattern are next to each other, the pattern should cover both cells seamlessly. This codepen shows the problem: https://codepen.io/Carsten-Fuchs/pen/LYodKxv
The details depend on the size of the preview area, so you may have to make the browser window larger or smaller to see the problem. Here is an enlarged screenshot of a place where four cells meet, demonstrating the problem:
The desired result and goal of this question is:
Already tried:
-
Using
background-attachment: fixed;seems to solve the problem, but then the background image is fixed to the origin of the viewport, that is, it stops scrolling along with the table. -
Applying the background image to the
<table>element doesn’t help, because it covers all cells, not only individually chosen ones.
Thus, the question is how the same seamless alignment can be achieved but keep the origin fixed to the <body>, the <table> element or anything else so that the hatches scroll along with the rest of the page contents.