如何在一个 <td> 单元格中创建两列？ [复制]

Question

我试图在一个<td> 单元格中创建两列，同时保持表格的其余部分完好无损。

这是我正在尝试做的一个示例

这是我的表格的代码笔：

https://codepen.io/akamali/pen/XBVxxZ

我尝试使用colspan 获取它并在其中添加两列<tr>，但结果总是不均匀。我也尝试添加一张桌子，但看起来一点也不好看。有任何想法吗？

Answer 1

如下使用colspan：

.table {
  width: 100%;
  background-color: #ffffff;
  border: 4px solid #979797;
}

.table td {
  border-right: 2px solid #979797;
  border-bottom: 4px solid #979797;
  padding: 50px;
  height: 10px;
}

.table td:nth-child(3n+0) {
  border-right: 4px solid #979797;
}

.table td:last-child {
  border-right: none;
}

.table tr:last-child td {
  border-bottom: none;
}

<div>
  <table class="table">
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td colspan="3"></td>
      <td colspan="3"></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</div>