Is it possible to achieve a Glassmorphism effect for each row in a table using CSS styling? I tried using backdrop-filter with the tr tag, but it doesn't seem to work. What are some alternative CSS properties that can be used to achieve a blur effect for rows?
<!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>