How can I set a proper shadow border for alternating td elements in a table? I've been experimenting with the code below. While the shadow effects work, they are getting cut off at each td junction. Can anyone provide assistance? Here is my table:
<table class="myTable" style="padding: 2em;width: 100%;">
<tr><th>subject</th>
<th>name</th>
<th>mark1</th>
<th>mark2</th>
<th>total</th>
</tr>
<tr>
<td>english</td>
<td>abc</td>
<td>10</td>
<td>23</td>
<td>33</td>
</tr>
<tr>
<td>latin</td>
<td>abc</td>
<td>10</td>
<td>23</td>
<td>33</td>
</tr>
........
</table>
I have implemented the following code for the shadow effect:
table.myTable td:nth-child(even)
{
box-shadow: 16px 3px 10px -7px #888, -10px 0px 20px -7px #888;
}