table 鼠标移上去改变单元格边框颜色。
表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
用td:hover,显示不全
搜索了好久，没有找到好的方法，用左右边框也不完美。
于是就在想，移上去的时候给加个伪元素after，绝对定位。
定义和用法
:after 伪元素在元素之后添加内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>border-hover</title> <style type="text/css"> .w1000{width:1000px;margin:0 auto;} .table{width:100%;border-collapse:collapse;text-align:center;font-size:14px;} .table tr th{border: 1px solid #d9dbda;padding:5px 0;} .table tr td{border: 1px solid #d9dbda;} .height2{height:61px;line-height:61px;} .height1{height:30px;line-height:30px;} .table tr td:hover .list-div{position:relative;} .table tr td:hover .list-div:after{ content: ""; height: 100%; left: -1px; position: absolute; top: -1px; width: 100%; z-index: 100; } .table tr td.list01-td:hover .list-div:after{ border: 1px solid #b1bac6; } .table tr td.list02-td:hover .list-div:after{ border: 1px solid #76ca5a; } .table tr td.list03-td:hover .list-div:after{ border: 1px solid #ff9600; } </style> </head> <body> <div class="w1000"> <table class="table" cellpadding="0" cellspacing="0" > <thead> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> </thead> <tbody> <tr> <td rowspan="2" class="list01-td"><div class="list-div height2">星期</div></td> <td colspan="5" class="list02-td" ><div class="list-div height1">星期</div></td> <td></td> </tr> <tr> <td class="list02-td"><div class="list-div height1">星期</div></td> <td colspan="4"></td> <td></td> </tr> <tr> <td colspan="3"></td> <td colspan="2" class="list03-td"><div class="list-div height1">星期</div></td> <td colspan="2"></td> </tr> </tbody> </table> </div> </body> </html>
显示：
提醒：
1.开始做的时候没做合并列的，合并行的简单点不需要加高度。
