table 鼠标移上去改变单元格边框颜色。
表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
用td:hover,显示不全
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA18AAABmCAIAAAC7ubzGAAAGIklEQVR4nO3dUW6jShQEUNbFglhPr4a9JCyG9+Ekbfya2JJhQsE56p+JHGlGpe4pXTB089LH9DkTQlgpJBVEWEGEFURYKW5Jdc2fEkFYKSQVRFhBhBVEWCm0w3jCSiGpIMIKIqwgwkqhHcYTVgpJBRFWEGEFEVaK1XZoWZZlWZZlXXDNXfcxfZodBhMWALClrptdWY4mLABgS9phOmEBAFvSDtMJCwDYknaYTlgAwJa0w3TCAgC2pB2mExYAsCXtMJ2wAIAtaYfphAUAbEk7TCcsAGBL2mE6YQHzPA7db4bx63NT6X/+MJW+L9PtZ3f6Mv3ZPwM4BO0wnbCAeR6H2gAf1EL4UAO/y+B41xjHQTsEtMN0wgLenx1qh0ClHaYTFvDi7HBuX0V2ZRlY0g7TCQswOwS2pB2mExbwq5dmh9ohUGmH6YQFzPNteng3FVy50Gx2CDynHaYTFvD0yvLP3YSeaAM8px2mExZc3lT6ZadbmR02K2Rfyt280OwQ0A7zCQsu7lYFm88ybA4Eb19vrgVyUQi1Q0A7zCcs4NHqfYeLKeNU+m4oy49qh4B2mE9YcHVP7zlsXUKuv/vwHhXlENAO0wkLANiSdphOWADAlrTDdMICALakHaYTFgCwpbO0w3ffMZr7JNjAsACAAztRO2y/Nuq+EDafB9aXMfotUoFhAQAHdqJ2+NbsUDsEAJjnU7XD57PDuX0V2ZVlAIBvJ2qHF50dzl1nRayP6fPP/w6WZVmW9XR9TJ8f0+cJ2uEvXpod5rbDc4V1ZpICIMLtP6xTtMNx6O6ngisXms83O4wM65IkBUCE07TDp+8Z/ep8nmjDX5EUABHO0Q6n0i873crssFkhly+mNztkL5ICIMIZ2uGtCjafZdgcCN6+3lwL5KIQaofsRVIARDhDO2xYve9wMWWcSt8NZflR7ZC9SAqACKdoh0/vOWxdQq6/+/AelbBymBbWhUkKgAinaIfXJqwUkgIggnYYT1gpJAVABO0wnrBSSAqACNphvMCw3n3tYejDKQOTAuCKtMN4gWH9fBXo/2ohbD6iqC9j7ottApMC4Iq0w3iBYb07O9QOAWA/2mG8wLBemh3O7avIriwDwL60w3iBYZkdAsBxaYfxzhXWS7ND7RAA9qMdxosMaxy6+6ngyoVms0MA+Pe0w3iBYT199eFX5/NEGwD497TDeGlhTaVfdrqV2WGzQi7flW12CADb0w7jZYV1q4LNZxk2B4K3rzfXArkohNohAGxPO4wXH9bqfYeLKeNU+m4oy49qhwCwPe0wXlhYT+85bF1Crr/78B6VpHKYlhQAV6UdxhNWCkkBEEE7jCesFJICIIJ2GE9YKSQFQATtMJ6wUkgKgAjaYTxhpZAUABG0w3jCSiEpACJoh/GElUJSAETQDuMJK4WkAIiw2g4ty7Isy7Ksyy6zQ4DKGQh7sLOyaIcAlTMQ9mBnZdEOASpnIOzBzsqiHQJUzkDYg52VRTsEqJyBsAc7K4t2CFA5A2EPdlYW7RCgcgbCHuysLNohQOUMhD3YWVm0Q4DKGQh7sLOyaIcAlTMQ9mBnZdEOASpn4DGMQ/ebYfz63FT6nz9Mpe/LdPvZnb5Mf/bP4IedlUU7BKicgccwDrUBPqiF8KEGfpfB8a4xjoN2eAx2VhbtEKByBh7Du7ND7fBo7Kws2iFA5Qw8hpdmh3P7KrIry0dkZ2XRDgEqZ+AxmB2ejZ2VRTsEqJyBh/fS7FA7PBo7K4t2CFA5A49iHLr7qeDKhWazwxR2VhbtEKByBh7DkyvLP3cTeqJNCjsri3YIUDkDD2Aq/bLTrcwOmxWyL+VuXmh2eBR2VhbtEKByBv65WxVsPsuwORC8fb25FshFIdQOj8LOyqIdAlTOwCNave9wMWWcSt8NZflR7fAo7Kws2iFA5Qz8e0/vOWxdQq6/+/AeFeXwGOysLNohQOUMhD3YWVm0Q4DKGQh7sLOyaIcAlTMQ9mBnZdEOASpnIOzBzsqiHQJUzkDYg52VRTsEqJyBsAc7K4t2CFA5A2EPdlYW7RCgcgbCHuysLI12aFmWZVmWZV12PbZDAACuTDsEAKDSDgEAqLRDAACq/wCzzwNCXI/3kQAAAABJRU5ErkJggg==" alt="" />
搜索了好久，没有找到好的方法，用左右边框也不完美。
于是就在想，移上去的时候给加个伪元素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>
显示：
aaarticlea/png;base64,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" alt="" />
提醒：
1.开始做的时候没做合并列的，合并行的简单点不需要加高度。
table 鼠标移上去改变单元格边框颜色。的更多相关文章
- DevExpress控件-GridControl根据条件改变单元格/行颜色--转载
DevExpress控件-数据控件GridControl,有时我们需要根据特定条件改变符合条件的行或者单元格颜色达到突出显示目的,现在动起鼠标跟我一起操作吧,对的,要达到这个目的您甚至都不用动键盘. ...
- gridview根据条件来改变行的颜色以及改变单元格的颜色。
gridview根据条件来改变行的颜色以及改变单元格的颜色. 通过在RowDataBound事件中写代码来实现,见代码. protected void GridView1_RowDataBound(o ...
- DevExpress控件-GridControl根据条件改变单元格/行颜色(Dev GridControl 单元格着色) z
DevExpress控件-数据控件GridControl,有时我们需要根据特定条件改变符合条件的行或者单元格颜色达到突出显示目的,现在动起鼠标跟我一起操作吧,对的,要达到这个目的您甚至都不用动键盘. ...
- DataGridView：根据条件改变单元格的颜色
根据条件改变DataGridView行的颜色可以使用RowPrePaint事件. 示例程序界面如下: 示例程序代码如下: using System; using System.Collections. ...
- Devexpress Winform Gridcontrol 中根据条件单元格的值改变单元格的颜色等属性。
提供一下三种方法 1.使用设计器 点击gridcontrol控件,run designer,format Condtions, add,然后进行各种条件的设置. 2.用代码代替设计器. 实例代码: p ...
- easyui 改变单元格背景颜色
另外一种方法:https://www.cnblogs.com/raitorei/p/9989649.html easyui的datagrid改变整行颜色:https://www.cnblogs.com ...
- Easyui之datagrid实现点击单元格修改单元格背景颜色
前段时间有个需求中有点击datagrid的单元格实现某种事件,调用datagrid的onclickCell这个方法很容易实现,但是体验不好啊,完全不知道自己刚才点击的是哪个单元格,然后就尝试单击单元格 ...
- js如何实现动态点击改变单元格颜色？
js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...
- [C1] 优化 C1FlexGrid 单元格边框
一 优化理由 如下图所示,如果按照 C1FlexGrid 自带的单元格边框设置,即对每个单元格的 CellStyle 的 BorderThickness 进行设置,会得到如下图的效果: 其中,明显可 ...
随机推荐
- #26 fibonacci seqs
Difficulty: Easy Topic: Fibonacci seqs Write a function which returns the first X fibonacci numbers. ...
- [LeetCode] Longest Substring with At Least K Repeating Characters 至少有K个重复字符的最长子字符串
Find the length of the longest substring T of a given string (consists of lowercase letters only) su ...
- logstash服务启动脚本
logstash服务启动脚本 最近在弄ELK,发现logstash没有sysv类型的服务启动脚本,于是按照网上一个老外提供的模板自己进行修改 #添加用户 useradd logstash -M -s ...
- SQL开发技巧(二)
本系列文章旨在收集在开发过程中遇到的一些常用的SQL语句,然后整理归档,本系列文章基于SQLServer系列,且版本为SQLServer2005及以上-- 文章系列目录 SQL开发技巧(一) SQL开 ...
- ★Kali信息收集~2.Whois ：域名信息
Web地址:http://whois.chinaz.com/ | http://www.whois.net/ 软件参数:whois 常用命令:whois 域名 (重点看whois server和R ...
- SQL-从数据类型 varchar 转换为 bigint 时出错的解决方案
解决
- 基於tiny4412的Linux內核移植--- 中斷和GPIO學習（2）
作者 彭東林 pengdonglin137@163.com 平臺 tiny4412 ADK Linux-4.4.4 u-boot使用的U-Boot 2010.12,是友善自帶的,爲支持設備樹和uIma ...
- DotNet生成随机数的一些方法
在项目开发中,一般都会使用到“随机数”,但是在DotNet中的随机数并非真正的随机数,可在一些情况下生成重复的数字,现在总结一下在项目中生成随机数的方法. 1.随机布尔值: /// <summa ...
- 【目录】JUC锁框架目录
JUC锁框架的目录整理如下: 1. [JUC]JUC锁框架综述 2. [JUC]JDK1.8源码分析之LockSupport(一) 3. [JUC]JDK1.8源码分析之AbstractQueuedS ...
- heart
好久没写博客了,不想废话,直接欣赏效果! 点击这里,查看完美效果! 附完整代码: <!doctype html> <html> <head> <meta ch ...