最近有这么个需求，鼠标点击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>