模仿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;
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 .line-sh.top {
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 style="width:800px;margin:20px auto;">
<div style="height:80px;padding-top:40px;"> 未经处理加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 style="height:80px;padding-top:40px;"> 未经处理加2px边框颜色效果</div>
<table class="table table-bordered demo3">
<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 style="height:80px;padding-top:40px;">使用元素伪装border效果</div>
<table class="table table-bordered demo1">
<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>
<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>
<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>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script>
$("td").click(function () {
$(this).parent().parent().find("td").removeClass("active");
$(this).addClass("active");
})
</script>
</body>
</html>