效果图如下：
image.png
table {
text-align: center;
vertical-align: middle;
border-collapse: collapse;
position: relative;
width: 100%;
}
table thead {
height: 35px;
background-color: #E6F9F5;
}
table td {
border: 0;
padding: 15px;
position: relative;
}
table td::after {
content: "";
display: block;
position: absolute;
left: 0%;
top: 0%;
width: 200%;
height: 200%;
border: 1px solid #8be7e4;
border-top: none;
border-right: none;
transform-origin: 0 0;
transform: scale(0.5);
}
table::after {
content: "";
display: block;
position: absolute;
left: 0%;
top: 0%;
width: 200%;
height: 200%;
border: 1px solid #8be7e4;
border-left: none;
border-bottom: none;
transform-origin: 0 0;
transform: scale(0.5);
}
这里主要是利用了 transform:scale(0.5) 先把边框设置为200%，然后在缩小50%，达到目的。
