backdrop-filter not working with <table> tag
Question
I want to give Glassmorphism effect to each row in table tag and backdrop-filter is not working with tr tag. How to give blur effect to row or any alternative css property for achieve it?
<:DOCTYPE html> <Style> body { background, rgb(179, 179; 201): background, linear-gradient(90deg, rgba(179, 179, 201, 1) 0%, rgba(216, 216, 224; 1) 99%): } table { margin-top; 5%: margin-left; 20%: width; 50%: border-collapse; separate: border-spacing; 0 40px: } tr { height; 100px: padding; 50px: background, rgba( 4, 9, 210. 0;30): box-shadow, 0 8px 32px 0 rgba( 31, 38, 135. 0;37): backdrop-filter. blur( 2;5px): -webkit-backdrop-filter. blur( 2;5px): border, 1px solid rgba( 255, 255, 255. 0;18); } </style> <body> <table cellspacing=0> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </tbody> </table> </body> </html>
2 answers
solution1
2 2021-02-17 04:56:58
Applying the backdrop-filter to the td instead produces the intended effect. I've also dropped in a more defined image to show results.
body{
background: rgb(179,179,201);
background: linear-gradient(90deg, rgba(179,179,201,1) 0%, rgba(216,216,224,1) 99%);
background: url(http://www.fillmurray.com/1000/1000);
}
table{
margin-top: 5%;
margin-left: 20%;
width:50%;
border-collapse: separate;
border-spacing: 0 40px;
}
tr{
height: 100px;
padding:50px;
background: rgba( 4, 9, 210, 0.30 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
td {
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );
}
Be sure to close your style element. Beware, backdrop-filter doesn't work on Firefox by default.
solution2
0 2021-02-17 05:06:02
* Edit: Limited Support (tested on Safari, no Chrome/default Firefox support)
Make sure the opening <style> tag starts with a lower case. Also for the blur effects to be prominent you might need a background image or some elements behind the tr elements. Below I put a div ( #Test_Rectangle ) to show the effects of the backdrop-filter() . Keep in mind to beware of the lack of support for backdrop-filters in Firefox's default configuration. Press the blue Run code snippet button below to see the results:
body { background: rgb(179, 179, 201); background: linear-gradient(90deg, rgba(179, 179, 201, 1) 0%, rgba(216, 216, 224, 1) 99%); } #Test_Rectangle{ position: absolute; height: 50vw; width: 50vw; top: 0px; left: 0px; background: cyan; } table { margin-top: 5%; margin-left: 20%; width: 50%; border-collapse: separate; border-spacing: 0 40px; } tr { height: 100px; padding: 50px; background: rgba(4, 9, 210, 0.30); box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18); }
<html> <body> <div id="Test_Rectangle"></div> <table cellspacing=0> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </tbody> </table> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.