table 鼠标移上去改变单元格边框颜色。
表格定义了border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
用td:hover,显示不全
aaarticlea/png;base64,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" 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 进行设置,会得到如下图的效果: 其中,明显可 ...
随机推荐
- excel常用技巧
复制表格时,如果要加上行标和列标.页面布局->工作表选项:标题,勾上打印->复制下拉框->复制为图片加上打印样式 一行长拆成几行短或几行短变成一行长的文本拆分,可以通过:填充-> ...
- 【流量劫持】SSLStrip 终极版 —— location 瞒天过海
前言 之前介绍了 HTTPS 前端劫持 的方案,虽然很有趣,然而现实却并不理想.其唯一.也是最大的缺陷,就是无法阻止脚本跳转.若是没有这个缺陷,那就非常完美了 -- 当然也就没有必要写这篇文章了. 说 ...
- ASP.NET Aries DataGrid 配置表头说明文档
DataGrid 配置表头 字段 中文 说明 Field 字段 注意:mg_ 开头的字段为层级表头 Title 列称 OrderNum 序号 显示的顺序(冻结和非冻结列是两个组的序号) Width 列 ...
- Mono 3.2.3 Socket功能迎来一稳定的版本
由于兴趣自己业余时间一直在搞.net下面的通讯应用,mono的存在得以让.NET程序轻松运行在Linux之下.不过经过多尝试Socket相关功能在Mono下的表现并不理想.不管性能还是吞吐能力方面离我 ...
- C#移动跨平台开发（1）环境准备
C#依托于mono平台可以实现Unix平台服务器端开发已经不是什么新鲜事了,而Xarmain公司(初始成员大多来自原Mono.MonoTouch.Mono For Android成员)继续将C#的先进 ...
- Mac OS X上编写 ASP.NET vNext（一）KRE环境搭建
最新的asp.net vnext已经可以支持在mac上运行了,当然用的是mono.相比linux来说,mac的安装略显繁琐.对于大部分用Windows开发asp.net的程序员来说,初次配置还是很费时 ...
- [Mahout] 完整部署过程
概述 Mahout底层依赖Hadoop,部署Mahout过程中最困难的就是Hadoop的部署 本文假设用户本身没有进行Hadoop的部署,记述部署Mahout的过程 ...
- [翻译]AKKA笔记 - CHILD ACTORS与ACTORPATH -6
原文:http://rerun.me/2014/10/21/akka-notes-child-actors-and-path/ Actor是完全的继承结构.你创建的任何Actor肯定都是一个其他Act ...
- CSS样式表分类
1.内联样式表 <p style="font-size:11px;">内联样式表</p> 2.内嵌样式表 写在head标签里 <style typ ...
- iOS-证书
1.iOS-证书相关 2.iOS-证书申请 3.iOS-APNS证书申请与使用 4.iOS-App发布证书的申请与使用