长沙雨花区建设局网站,建网站 主流软件,网站建设和管理情况自查报告,淘宝放单网站怎么做表格定义了
border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。用td:hover,显示不全 搜索了好久#xff0c;没有找到好的方法#xff0c;用左右边框也不完美。
于是就在想#xff0c;移上去的时候给加个伪元素after#…表格定义了
border-collapse:collapse;边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。用td:hover,显示不全 搜索了好久没有找到好的方法用左右边框也不完美。
于是就在想移上去的时候给加个伪元素after绝对定位。 定义和用法 :after 伪元素在元素之后添加内容。 这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地这个伪元素是行内元素不过可以使用属性 display 改变这一点。 注释如果已规定 !DOCTYPE那么 Internet Explorer 8 以及更高版本支持 content 属性。 !DOCTYPE html
html
head
meta charsetutf-8
titleborder-hover/title
style typetext/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
bodydiv classw1000table classtable cellpadding0 cellspacing0 theadtrth周一/thth周二/thth周三/thth周四/thth周五/thth周六/thth周日/th/tr/theadtbodytrtd rowspan2 classlist01-tddiv classlist-div height2星期/div/tdtd colspan5 classlist02-td div classlist-div height1星期/div/tdtd/td/trtrtd classlist02-tddiv classlist-div height1星期/div/tdtd colspan4/tdtd/td/trtrtd colspan3/tdtd colspan2 classlist03-tddiv classlist-div height1星期/div/tdtd colspan2/td/tr/tbody/table/div
/body
/html 显示 提醒 1.开始做的时候没做合并列的合并行的简单点不需要加高度。
