模仿Excel设置单元格--table单个TD的边框颜⾊效果
最近有这么个需求，⿏标点击td时需要变化td的颜⾊，由于⼀般都是适⽤了·border-collapse: collapse；这个属性，故相邻的两个td共⽤⼀个边框，先看⼀看设置不同值的效果:
解决思路：直接设置⾏不通，设置2px⼜显得太宽了，不过看了WPS的表格选中状态时就是会⽐其它的要宽⼀倍的，⽽且⾏之间切换时td的⾼度会变化，会有跳动的感觉，所以当⾃⾝实现不了时，就得靠其它的元素来辅助了，上下左右分部⽤⼀个1px带背景⾊的元素定位到td的四周，位置和元素的⼤⼩通过调试了⼏次，就到刚刚好的值了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>设置单个TD边框颜⾊</title>
<style>
*{
box-sizing: border-box;
margin: 0;
margin: 0;
padding: 0;
}
table{
border: 1px solid #ddd;
background: #eff2f6;
width: 100%;
max-width: 100%;
margin-bottom: 0;
border-collapse: collapse;
border-spacing: 0;
}
td,
tr,
th{
border: 1px solid #ddd;
padding: 10px 12px;
text-align: center;
}
table td{
position: relative;
}
table.demo1 td .line-sh{
display: none;
}
table.demo1 td.active .line-sh{
display: block;
position: absolute;
background-color: #016ac4;
}
table.demo1 td.active .p{
left: 0;
top: -1px;
width:calc(100% + 1px);
height: 1px;
}
table.demo1 td.active .line-sh.right{
right: -1px;
top: 0;
width: 1px;
height:calc(100% + 1px);
}
table.demo1 td.active .line-sh.bottom{
left: -1px;
bottom: -1px;
width:calc(100% + 1px);
height: 1px;
}
table.demo1 td.active .line-sh.left{
left: -1px;
top: -1px;
width: 1px;
height:calc(100% + 1px);
}
table.demo1 td div{
position: relative;
z-index: 2;
}
table.demo2 td.active{
border: 1px solid #016ac4;
}
table.demo3 td.active{
border: 2px solid #016ac4;
}
</style>
</head>
<body>
<div >
<div >未经处理加1px边框颜⾊效果</div> <table class="table table-bordered demo2">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div>Mark</div>
</td>
<td>
<div>Otto</div>
</td>
<td>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<div>Mark</div>
</td>
<td>
<div>Otto</div>
</td>
<td>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<div>Mark</div>
</td>
<td>
<div>Otto</div>
</td>
<td>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>
<div>Mark</div>
</td>
<td>
<div>Otto</div>
</td>
<td>
<div>@mdo</div>
</td>
</tr>
</tbody>
</table>
<div >未经处理加2px边框颜⾊效果</div>
<div >未经处理加2px边框颜⾊效果</div> <table class="table table-bordered demo3">table设置内边框
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<div>Mark</div>
</td>
<td>
<div>Otto</div>
</td>
<td>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<div>Mark</div>
</td>
<td>
<div>Otto</div>
</td>
<td>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<div>Mark</div>
</td>
<td>
<div>Otto</div>
</td>
<td>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>
<div>Mark</div>
</td>
<td>
<div>Otto</div>
</td>
<td>
<div>@mdo</div>
</td>
</tr>
</tbody>
</table>
<div >使⽤元素伪order效果</div>
<table class="table table-bordered demo1">
<thead>
<tr>
<th>#</th>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>Mark</div>
</td>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>Otto</div>
</td>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>Mark</div>
</td>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>Otto</div>
</td>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>Mark</div>
</td>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>Otto</div>
</td>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
<div>@mdo</div>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>
<b class="line-sh top"></b><b class="line-sh right"></b>
<b class="line-sh bottom"></b><b class="line-sh left"></b>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论