如何在表格中的替代td中为右边界应用阴影效果

Question

如何为表中的替代tds设置正确的阴影边框。我正在尝试使用以下代码。在这个阴影效果的作品。但阴影效果将削减每个tds join.Anyone可以帮助我吗？我的桌子是

<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>

我使用此代码进行阴影效果

table.myTable td:nth-child(even)
{
       box-shadow: 16px 3px 10px -7px #888, -10px 0px 20px -7px #888;
}

Answer 1

    <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 style="box-shadow:16px 3px 10px">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>

适用于td风格

Answer 2

DEMO

<tr> - 指定行<td> - 指定列

在演示中，甚至是带有阴影的列

CSS：

table.myTable td:nth-child(even)
{
       box-shadow: 16px 3px 10px -7px #888, -10px 0px 20px -7px #888;
}
.center{text-align:center;}

Answer 3

或者，您可以使用border-collapse分隔单元格并放置边框间距。

例如：http://codepen.io/pen/srwCi