如何使表格单元格边框覆盖邻居表格单元格边框

Question

因此，在下面的示例中，您将看到黑色边框仅覆盖底部和右侧，而我还希望它覆盖左侧和顶部。反正有吗？

＆＃13;

＆＃13;

<script type = "text/javascript">
    function myFunction() {
        alert("Thank you for subscribing")
    }
</script>

<button type="submit" class="btn btn-primary" onclick="myFunction()">Subscribe</button>

＆＃13;

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid red;
  height: 50px;
  width: 50px;
}

table td.border {
  border: 1px solid black;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

这样做的一种方法是使用pseudo元素，如下所示：

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid red;
  height: 50px;
  width: 50px;
}

table td.border {
  position: relative;
}
table td.border:before {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: -1px;
  bottom: -1px;
  border: 1px solid blue;
}

Answer 2

将边框设置为1px双黑色。

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid red;
  height: 50px;
  width: 50px;
}

table td.border {
  border: 1px double black;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td class="border"></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>  
</table>

see here already answered by someone