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

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

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

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

<!-- 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
匿名

发表评论

匿名网友

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

确定