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

Question

如何为表格中的替代 tds 设置右阴影边框。我正在尝试使用以下代码。在这个阴影效果作品中。但是阴影效果会在每个 tds 加入时剪切。任何人都可以帮助我吗？我的桌子是

<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

或者，您可以使用边框折叠分隔单元格并设置边框间距。

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

Answer 2

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

演示

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