Chrome 当与粘性/相对定位一起使用时，表格元素的框阴影无法正常工作

kxe2p93d 于 2023-08-01 发布在 Go

关注(0)|答案(1)|浏览(98)

我试图为表的第一列提供box-shadow，沿着我也为第一列元素使用position: sticky; left: 0。box-shadow出现在Firefox中，但没有出现在Chrome中，我已经尝试了不同的z索引，但似乎没有在Chrome中工作。

table {
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border: 1px solid black;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr td:first-child {
  position: sticky;
  left: 0;
  z-index: 100;
  background-color: skyblue;
  box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  -webkit-box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
}

个字符
在代码中，我使用了sticky，但我也尝试了relative定位，但结果是一样的。

Firefox：

的数据

Chrome：

的

google-chrome

来源：https://stackoverflow.com/questions/76601529/box-shadow-for-table-elements-not-working-properly-when-used-with-sticky-relativ

1条答案

按热度按时间

6jjcrrmo1#

我没有解释为什么在Chromium浏览器中的粘盒上没有呈现盒阴影。但是，它可以与filter: drop-shadow()一起使用

table {
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid black;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

tr td:first-child{
  position: sticky;
  left:0;
  z-index: 100;
  background-color: skyblue;
  filter: drop-shadow(2px 2px 4px rgba(255, 0, 0, 0.5));
  -webkit-box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
}

个字符

赞(0）回复(0）举报 2023-08-01

我来回答

Chrome 当与粘性/相对定位一起使用时，表格元素的框阴影无法正常工作

Firefox：

Chrome：

1条答案

相关问题

热门标签

最新问答