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 0px 0px 1px 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 -1px 0 0 blue;
  border-collapse: collapse;
}

td {
  box-shadow: inset 1px 1px 0 0 blue;
}

.highlight td {
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
}
.highlight td:last-child {
  background-size: calc(100% - 1px) 100%;
}
.highlight:last-child td {
  background-size: 100% calc(100% - 1px);
}
.highlight:last-child td: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>
  <tr class="highlight">
    <td>but not with background-color</td>
    <td>(second cell to illustrate gap)</td>
  </tr>
  <tr class="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 -1px 0 0 blue;
  border-collapse: collapse;
}

td {
  box-shadow: inset 1px 1px 0 0 blue;
}

td:last-child {
  box-shadow: inset 1px 1px 0 0 blue, inset -1px 0px 0 0 blue;
}

tr:last-child td {
  box-shadow: inset 1px 1px 0 0 blue, inset 0px -1px 0 0 blue;
}

tr:last-child td:last-child {
  box-shadow: inset 1px 1px 0 0 blue, inset -1px -1px 0 0 blue;
}

.highlight td {
  background-color: yellow;
}

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