Thomas David Baker Thomas David Baker - 2 months ago 17
CSS Question

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:



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

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

.highlight {
background-color: #efe;
}

<table>
<tr>
<td>box shadow border fine here</td>
</tr>
<tr>
<td>and here</td>
</tr>
<tr class="highlight">
<td>but not with background-color</td>
</tr>
</table>





I am using
box-shadow
to fake borders on a table. I'm showing "top and left" on each
td
and "bottom and right" on the
table
itself to fill in the missing parts.

But if any
td
or
tr
in my table has a
background-color
(
.highlight
) the
box-shadow
coming from the
table
disappears.

(As to why I'm doing this, it's because I'm setting a vertical rhythm on the site which applies to text in tables also. If I use standard table borders and my standard line-height I break the vertical rhythm. Even if I want to imperfectly account for borders by changing the line-height I cannot because the text might wrap making my border adjustment to the line-height apply to every row of text instead of just once for the block of text.)

Answer

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>

Comments