简单解释下，鼠标移动到td，想让当前行出现高亮背景很简单，直接给tr:hover就可以了，但是，如果想让列出现，比较麻烦，我们可以借助after的伪类来实现，就是当td:hover的时候，用:after，给他加个很高的容器，相对于td定位，只要定位了，想让这个容器往哪就往哪，注意看css代码的最后一句话，就明白了。
由此延伸，我们可以用:before和:after做出很多效果。点击“玻璃木纹效果个人博客响应式模板”，这个模板的玻璃纹理，就是用before和after加上去的。
css代码：
table{overflow:hidden; font-size:14px; font-family:Arial;}
td, th {padding:20px; position:relative; outline:0;}
tr:hover{background:#ffa;}
td:hover::after,th:hover::after{content: ''; height: 10000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; display:block; background-color: #ffa;}
html代码：
<table>
<thead>
<tr>
<th></th>
<th class="col">50kg</th>
<th class="col">55kg</th>
<th class="col">60kg</th>
<th class="col">65kg</th>
<th class="col">70kg</th>
</tr>
</thead>
<tbody>
<tr>
<th class="row">160cm</th>
<td>20</td>
<td>21</td>
<td>23</td>
<td>25</td>
<td>27</td>
</tr>
<tr>
<th class="row">165cm</th>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
<td>26</td>
</tr>
<tr>
<th class="row">170cm</th>
<td>17</td>
<td>19</td>
<td>21</td>
<td>23</td>
<td>25</td>
</tr>
<tr>
<th class="row">175cm</th>
<td>16</td>
<td>18</td>
<td>20</td>
<td>22</td>
<td>24</td>
</tr>
</tbody>
</table>