How To Prevent Background-color From Hiding Box-shadow?

Adding a background-color to a td or tr hides the box-shadow on the parent table. Minimal example: I am using box-shadow to fake borders on a table. I'm showing 'top and left' on

Solution 1:

Use the box shadow without the any offset. like this:

table {
  border-collapse: collapse;
  border-spacing: 0;

}

td {
  box-shadow: inset 0px0px1px blue;
}

.highlight {
  background-color: yellow;
}

Solution 2:

Limit the background size to 1 px less than the total size. Use calc (100% - 1px) for this:

table {
  border-collapse: collapse;
  border-spacing: 0;
}


table {
  box-shadow: inset -1px -1px00 blue;
  border-collapse: collapse;
}

td {
  box-shadow: inset 1px1px00 blue;
}

.highlighttd {
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
}
.highlighttd:last-child {
  background-size: calc(100% - 1px) 100%;
}
.highlight:last-childtd {
  background-size: 100%calc(100% - 1px);
}
.highlight:last-childtd:last-child {
  background-size: calc(100% - 1px) calc(100% - 1px);
}

<table><tr><td>box shadow border fine here</td><td>-</td></tr><tr><td>and here</td><td>-</td></tr><trclass="highlight"><td>but not with background-color</td><td>(second cell to illustrate gap)</td></tr><trclass="highlight"><td>second row to illustrate gap</td><td>-</td></tr></table>

Another way to get this result, playing with shadows on the td instead of the table:

table {
  border-collapse: collapse;
  border-spacing: 0;
}


table {
  box-shadow: inset -1px -1px00 blue;
  border-collapse: collapse;
}

td {
  box-shadow: inset 1px1px00 blue;
}

td:last-child {
  box-shadow: inset 1px1px00 blue, inset -1px0px00 blue;
}

tr:last-childtd {
  box-shadow: inset 1px1px00 blue, inset 0px -1px00 blue;
}

tr:last-childtd:last-child {
  box-shadow: inset 1px1px00 blue, inset -1px -1px00 blue;
}

.highlighttd {
  background-color: yellow;
}

<table><tr><td>box shadow border fine here</td><td>-</td></tr><tr><td>and here</td><td>-</td></tr><trclass="highlight"><td>but not with background-color</td><td>(second cell to illustrate gap)</td></tr><trclass="highlight"><td>second row to illustrate gap</td><td>-</td></tr></table>