CODEWITHSUNDEEP
htmlcss
yigal
yigal

Reputation: 4725

css inset box-shadow for table row?

see my related yet different question: css box-shadow for table row?

Here is my HTML code: 

<style>
.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
}
</style>
<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>
The goal is to have a inset drop shadow in the first row. The problem is that the background color of cell 1 is obscuring it.

My question is: how do I make the inset drop show show on top of the background of cell 1?

Upvotes: 3

Views: 448

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 105903

You may also give a try to mix-blend-mode

The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.

.yellow{
    background-color: yellow;
    mix-blend-mode:multiply
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: inset 1px 1px 5px 5px #d99292;
 /*optionnal :
    background:white ; 
  to avoid .yellow mixing eventually with body, or else background */
}
<table>
    <tr>
        <td class=yellow>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td class=yellow>4</td>
    </tr>
</table>

Upvotes: 2

huan feng
huan feng

Reputation: 8623

I have a work round here.

Adding an absolute empty tr to be on the top.

.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    position: absolute;
    box-shadow: inset 1px 1px 5px 5px #d99292;
}
<table>
  <tr>
    <td>&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272909

color the table cell using a pseudo element that you can make behind the shadow:

table {
  position:relative;
  z-index:-1;
}

.yellow {
  position:relative;
}
.yellow::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:yellow;
}

td {
  width: 40px;
}

tr:first-child {
  box-shadow: inset 1px 1px 5px 5px #d99292;
}
<table>
  <tr>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>

Upvotes: 2

Related Questions