1

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.

table.demo {
  border: 1px solid blue;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

table.demo td {
  height: 100px;
}

table.demo td.stripes {
  /* Using  background-attachment: fixed;  is _not_ the desired solution, because the background no longer scrolls alogn with the table. */
  /* background-attachment: fixed; */

  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAAIElEQVQImWNggIKOjo7/HR0d/xmQAbIAnI2hCocYYQAATEQPi+UvdB4AAAAASUVORK5CYII=);
}

table.demo td.B { background-color: #ffe; }
table.demo td.C { background-color: #efe; }
table.demo td.E { background-color: #eef; }
table.demo td.F { background-color: #fee; }
<table class="demo">
  <tr>
    <td class="stripes A">A</td>
    <td class="stripes B">B</td>
    <td class="stripes C">C</td>
  </tr>
  <tr>
    <td class="stripes D">D</td>
    <td class="stripes E">E</td>
    <td class="stripes F">F</td>
  </tr>
  <tr>
    <td class="stripes G">G</td>
    <td>H</td>
    <td class="stripes I">I</td>
  </tr>
</table>

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:

mismatched background image where four cells meet

The desired result and goal of this question is:

enter image description here

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.

Improve this question
2
  • you may set the repeating image inside table, then hide or mix it from each cells : jsfiddle.net/94ytch8p mix-blend-mode comes with many setting developer.mozilla.org/fr/docs/Web/CSS/mix-blend-mode#syntaxe choose the one that suits your need .. if any
    – G-Cyrillus
    Commented Jun 22 at 11:06
  • @G-Cyrillus: This unfortunately only works if there is only pattern, as in the simplified table I used in the codepen above. My actual table is much larger and I would like to use several patterns with it, each indicating a different purpose, but two neighboring cells with the same pattern should still seamlessly meet.
    – Carsten Fuchs
    Commented Jun 22 at 13:44

2 Answers 2

Reset to default
1

You can simulate a fixed background attachment to only the table element by using pseudo-element that you position relatively to the whole table then using clip-path on the table cell to hide the overflowing part

table.demo {
  border: 1px solid blue;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  width: 100%;
  position: relative; /* relative here */
  z-index: 0;
}

table.demo td {
  height: 100px;
  clip-path: inset(0); /* this is important */
}

/* the background */
table.demo td.stripes:before {
  content:"";
  position: absolute;
  z-index: -1;
  inset: 0; 
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAAIElEQVQImWNggIKOjo7/HR0d/xmQAbIAnI2hCocYYQAATEQPi+UvdB4AAAAASUVORK5CYII=);
}
/**/

table.demo td.B { background-color: #ffe; }
table.demo td.C { background-color: #efe; }
table.demo td.E { background-color: #eef; }
table.demo td.F { background-color: #fee; }
<table class="demo">
  <tr>
    <td class="stripes A">A</td>
    <td class="stripes B">B</td>
    <td class="stripes C">C</td>
  </tr>
  <tr>
    <td class="stripes D">D</td>
    <td class="stripes E">E</td>
    <td class="stripes F">F</td>
  </tr>
  <tr>
    <td class="stripes G">G</td>
    <td>H</td>
    <td class="stripes I">I</td>
  </tr>
</table>

Improve this answer
3
  • Thank you, this works well and I've been able to generalize this to using multiple distinct patterns in the same table. (For example one common pattern for cells B, C, F and a different pattern for D, G, H.) However, it seems that the patterns are now in front of the text, that is, the letters A, B, C, … ?
    – Carsten Fuchs
    Commented Jun 23 at 8:58
  • @CarstenFuchs forgot the z-index declarations, added now
    – Temani Afif
    Commented Jun 23 at 9:03
  • Wow, that's great! Thank you! :-)
    – Carsten Fuchs
    Commented Jun 23 at 9:09
0

Here is a suitable solution.

Add background-position: center bottom;

Adding padding also to:table.demo td:height:100px; padding:10px;

table.demo {
  border: 1px solid blue;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  text-align: center;
  width: 100%;
}

table.demo td {
  height: 100px;
  padding:10px;
}

table.demo td.stripes {
  /* Using  background-attachment: fixed;  is _not_ the desired solution, because the background no longer scrolls alogn with the table. */
  /* background-attachment: fixed; */

  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAFCAYAAABmWJ3mAAAAIElEQVQImWNggIKOjo7/HR0d/xmQAbIAnI2hCocYYQAATEQPi+UvdB4AAAAASUVORK5CYII=);
  background-position: center bottom;
}

table.demo td.B { background-color: #ffe; }
table.demo td.C { background-color: #efe; }
table.demo td.E { background-color: #eef; }
table.demo td.F { background-color: #fee; }
<table class="demo">
      <tr>
        <td class="stripes A">A</td>
        <td class="stripes B">B</td>
        <td class="stripes C">C</td>
      </tr>
      <tr>
        <td class="stripes D">D</td>
        <td class="stripes E">E</td>
        <td class="stripes F">F</td>
      </tr>
      <tr>
        <td class="stripes G">G</td>
        <td>H</td>
        <td class="stripes I">I</td>
      </tr>
    </table>

Thank you.

Improve this answer
2
  • This modifies the problem, but doesn't solve it: There is still misalignment both horizontally and vertically.
    – Carsten Fuchs
    Commented Jun 22 at 13:50
  • I added padding gap 10px to td element. That make it a little bit more better responsively. If that works for you. Thanks.
    – Raj Kumar
    Commented Jun 22 at 17:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.