您的位置：首页 > 其它

table 鼠标移上去改变单元格边框颜色。

2016-11-10 14:49 627 查看
表格定义了
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.开始做的时候没做合并列的，合并行的简单点不需要加高度。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航