html - 制作打破表格边界的特殊 td

Question

假设我想创建一个表格，其中某些行的边框打破了表格的边界 - 就像这样。

 +-+-+-+
 +-+-+-+
|+-+-+-+| 
 +-+-+-+

我该怎么做？

我试过 outline 和 outline-offset，但 IE 不支持后者。

Answer 1

像这样使用一些 div 并溢出表格单元格:

https://jsbin.com/recexe/edit?html,css,output

table {
  border-collapse: collapse;
}

td {
  border:1px solid black;
  width: 50px;
  height: 50px;
  position: relative;
}

.ol {
  position: absolute;
  left: -5px;
  background-color: red;
  top: 0;
  bottom: 0;
  width: 5px;
}

.or {
  position: absolute;
  right: -5px;
  background-color: red;
  top: 0;
  bottom: 0;
  width: 5px;
}

  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td><div class="ol"></div></td>
      <td></td>
      <td><div class="or"></div></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>