英文:
box-shadow for table elements not working properly when used with sticky/relative positioning
问题
我试图为表格的第一列提供box-shadow效果，同时我还在第一列元素上使用了position: sticky; left: 0。在Firefox中，box-shadow效果正常显示，但在Chrome中却没有显示。我已经尝试过不同的z-index值，但在Chrome中似乎都没有起作用。
在代码中，我使用了sticky定位，但我也尝试过使用relative定位，但结果都一样。
Firefox:
Chrome:
英文:
I am trying to provide a box-shadow for the first column of a table and along with that I am also using position: sticky; left: 0 for the first column elements. box-shadow is appearing in Firefox but not in Chrome, I have already tried with a different z-index but nothing seems to work in Chrome.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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);
}
<!-- language: lang-html -->
<table>
<tr>
<td>
<div>Column 1</div>
</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
<!-- end snippet -->
In the code, I am using sticky but I have also tried with relative positioning too, but the result is same.
Firefox:
Chrome:
答案1
得分: 1
我不知道为什么在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);
}
<table>
<tr>
<td><div>Column 1</div></td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
英文:
I don't have an explanation for why the box-shadow is not rendered on sticky boxes in Chromium browsers. However, it does work with filter: drop-shadow()
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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);
}
<!-- language: lang-html -->
<table>
<tr>
<td><div>Column 1</div></td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论