表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
用td:hover,显示不全

搜索了好久,没有找到好的方法,用左右边框也不完美。
于是就在想,移上去的时候给加个伪元素after,绝对定位。
定义和用法
:after 伪元素在元素之后添加内容。
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。
注释:如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 content 属性。
html><meta><title>border-hover</title><style>.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-p{position:relative;}.table tr td:hover .list-p:after{
content: "";
height: 100%;
left: -1px;
position: absolute;
top: -1px;
width: 100%;
z-index: 100;}.table tr td.list01-td:hover .list-p:after{
border: 1px solid #b1bac6;}.table tr td.list02-td:hover .list-p:after{
border: 1px solid #76ca5a;}.table tr td.list03-td:hover .list-p:after{
border: 1px solid #ff9600;}</style>
<p>
</p>
| 周一 | 周二 | 周三 | 周四 | 周五 | 周六 | 周日 |
|---|---|---|---|---|---|---|
星期 |
星期 |
|||||
星期 |
||||||
星期 |
显示:

提醒:
1.开始做的时候没做合并列的,合并行的简单点不需要加高度。











