Issue
here is my html/css code:
<style>
td{
padding:30px;
box-shadow: 0 0 5px 5px lightgray;
}
</style>
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
this produces the the folowing output
my question is: is there a way to make the box-shadow not affect the adjacent td?
here is the required output:
Solution
Consider using filter: drop-shadow
on the table
element. This way all solid child elements are treated as a whole to make a single instance of a shadow.
table {
/* to prevent "gaps" between cells */
border-collapse: collapse;
filter: drop-shadow(0px 0px 10px lightgray);
}
td {
padding: 30px;
/* child elements need to have a solid background in order to cast a shadow */
background-color: white;
}
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
But be aware it doesn't support spread
option like box-shadow
does, to achieve heavier shadows, you might want to add more shadow instances to the filter:
filter: drop-shadow(0px 0px 5px lightgray) drop-shadow(0px 0px 10px lightgray);
Answered By - Hao Wu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.