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

Question

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

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

我该怎么做？

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

Answer 1

使用一些div并溢出表格单元格，如下所示：

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

＆＃13;

＆＃13;

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;
}

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不确定他们是否在桌子上工作，但是看看CSS属性中的第一个孩子nth-child和last-child。

这将是：

<强> TR：第n个孩子（6）

宽度：108％; 表示更宽的行。