html - 使用 CSS 在表格内制作边框

Question

我需要用 CSS 在表格内制作一个边框，如图所示。左侧是我有的，右侧是我需要的边框。

Here is我正在尝试执行此操作的 fiddle 。

起初，我想用

border-top: 1px solid rgb(72, 170, 230);

和 border-left 等样式应用于外部单元格。它仅适用于该侧没有其他单元格的单元格。但如果他们有一个邻居边界 - “边”不起作用。

Answer 1

使用 rowspan 和 colspan 你可以执行。

HTML

<td class="inner-table" rowspan="4" colspan="4">
      <table>
        <tr>
          <td class="mainTable"></td>
          <td class="mainTable"></td>
          <td class="mainTable"></td>
          <td class="mainTable"></td>
        </tr>

CSS

.inner-table{
  background: #fff;
  border: 1px solid rgb(72, 170, 230);
}

https://jsfiddle.net/0gzp3jb1/2/