表格行的CSS盒阴影? [英] css box-shadow for table row?

问题描述

这是我的HTML代码:

Here is my HTML code:

<style>
.yellow{
    background-color: yellow;
}
td{
    width:40px;
}
tr:first-child {
    box-shadow: 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>

目标是在第一行周围添加阴影.问题是单元格4的背景色遮盖了它.

The goal is to have a drop shadow around the first row. The problem is that the background color of cell 4 is obscuring it.

我的问题是:如何在单元格4的背景顶部显示放映秀?

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

请参阅后续问题:表的CSS嵌入框阴影行?

推荐答案

降低下一个单元格的z-index:

Lower the z-index of the next cells:

.yellow {
  background-color: yellow;
}

td {
  width: 40px;
}

tr:first-child {
  box-shadow: 1px 1px 5px 5px #d99292;
}

tr:first-child  + tr td {
  position: relative;
  z-index: -1;
}

/* the below is not mandatory but to make sure 
the cells doesn't go below the table */
table {
  position:relative;
  z-index:0;
}

<table>
  <tr>
    <td class=yellow>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td class=yellow>4</td>
  </tr>
</table>

这篇关于表格行的CSS盒阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！