box-shadow在与sticky/relative定位一起使用时，表格元素不起作用。

huangapple
go评论93阅读模式
英文:

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:

box-shadow在与sticky/relative定位一起使用时，表格元素不起作用。

Chrome:

box-shadow在与sticky/relative定位一起使用时，表格元素不起作用。

英文:

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

  1. table {
  2.   border-collapse: collapse;
  3. }
  5. th,
  6. td {
  7.   padding: 8px;
  8.   border: 1px solid black;
  9.   text-align: left;
  10. }
  12. th {
  13.   background-color: #f2f2f2;
  14. }
  16. tr:nth-child(even) {
  17.   background-color: #dddddd;
  18. }
  20. tr td:first-child {
  21.   position: sticky;
  22.   left: 0;
  23.   z-index: 100;
  24.   background-color: skyblue;
  25.   box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  26.   -webkit-box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  27. }

<!-- language: lang-html -->

  1. &lt;table&gt;
  2.   &lt;tr&gt;
  3.     &lt;td&gt;
  4.       &lt;div&gt;Column 1&lt;/div&gt;
  5.     &lt;/td&gt;
  6.     &lt;td&gt;Column 2&lt;/td&gt;
  7.     &lt;td&gt;Column 3&lt;/td&gt;
  8.   &lt;/tr&gt;
  9.   &lt;tr&gt;
  10.     &lt;td&gt;Row 1, Column 1&lt;/td&gt;
  11.     &lt;td&gt;Row 1, Column 2&lt;/td&gt;
  12.     &lt;td&gt;Row 1, Column 3&lt;/td&gt;
  13.   &lt;/tr&gt;
  14.   &lt;tr&gt;
  15.     &lt;td&gt;Row 2, Column 1&lt;/td&gt;
  16.     &lt;td&gt;Row 2, Column 2&lt;/td&gt;
  17.     &lt;td&gt;Row 2, Column 3&lt;/td&gt;
  18.   &lt;/tr&gt;
  19. &lt;/table&gt;

<!-- end snippet -->

In the code, I am using sticky but I have also tried with relative positioning too, but the result is same.

Firefox:

box-shadow在与sticky/relative定位一起使用时，表格元素不起作用。

Chrome:

box-shadow在与sticky/relative定位一起使用时，表格元素不起作用。

答案1

得分: 1

我不知道为什么在Chromium浏览器中粘性框上的阴影未呈现的解释。但是，使用 filter: drop-shadow() 可以工作。

  1. table {
  2.   border-collapse: collapse;
  3. }
  5. th, td {
  6.   padding: 8px;
  7.   border: 1px solid black;
  8.   text-align: left;
  9. }
  11. th {
  12.   background-color: #f2f2f2;
  13. }
  15. tr:nth-child(even) {
  16.   background-color: #dddddd;
  17. }
  19. tr td:first-child{
  20.   position: sticky;
  21.   left:0;
  22.   z-index: 100;
  23.   background-color: skyblue;
  24.   filter: drop-shadow(2px 2px 4px rgba(255, 0, 0, 0.5));
  25.   -webkit-box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  26.   box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  27. }
  1. <table>
  2.   <tr>
  3.     <td><div>Column 1</div></td>
  4.     <td>Column 2</td>
  5.     <td>Column 3</td>
  6.   </tr>
  7.   <tr>
  8.     <td>Row 1, Column 1</td>
  9.     <td>Row 1, Column 2</td>
  10.     <td>Row 1, Column 3</td>
  11.   </tr>
  12.   <tr>
  13.     <td>Row 2, Column 1</td>
  14.     <td>Row 2, Column 2</td>
  15.     <td>Row 2, Column 3</td>
  16.   </tr>
  17. </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 -->

  1. table {
  2.   border-collapse: collapse;
  3. }
  5. th, td {
  6.   padding: 8px;
  7.   border: 1px solid black;
  8.   text-align: left;
  9. }
  11. th {
  12.   background-color: #f2f2f2;
  13. }
  15. tr:nth-child(even) {
  16.   background-color: #dddddd;
  17. }
  19. tr td:first-child{
  20.   position: sticky;
  21.   left:0;
  22.   z-index: 100;
  23.   background-color: skyblue;
  24.   filter: drop-shadow(2px 2px 4px rgba(255, 0, 0, 0.5));
  25.   -webkit-box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  26.   box-shadow: 2px 2px 4px rgba(255, 0, 0, 0.5);
  27. }

<!-- language: lang-html -->

  1. &lt;table&gt;
  2.   &lt;tr&gt;
  3.     &lt;td&gt;&lt;div&gt;Column 1&lt;/div&gt;&lt;/td&gt;
  4.     &lt;td&gt;Column 2&lt;/td&gt;
  5.     &lt;td&gt;Column 3&lt;/td&gt;
  6.   &lt;/tr&gt;
  7.   &lt;tr&gt;
  8.     &lt;td&gt;Row 1, Column 1&lt;/td&gt;
  9.     &lt;td&gt;Row 1, Column 2&lt;/td&gt;
  10.     &lt;td&gt;Row 1, Column 3&lt;/td&gt;
  11.   &lt;/tr&gt;
  12.   &lt;tr&gt;
  13.     &lt;td&gt;Row 2, Column 1&lt;/td&gt;
  14.     &lt;td&gt;Row 2, Column 2&lt;/td&gt;
  15.     &lt;td&gt;Row 2, Column 3&lt;/td&gt;
  16.   &lt;/tr&gt;
  17. &lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月3日 10:24:49
  • 转载请务必保留本文链接：https://go.coder-hub.com/76601529.html
  • css
  • google-chrome
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定