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.)

回答1:

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>

回答2:

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;
}

来源：https://stackoverflow.com/questions/39315204/how-to-prevent-background-color-from-hiding-box-shadow

标签

html

css

css3

border

box-shadow