如何在一个单元格中创建两列？

Question

我正在尝试在一个<td>单元中创建两列，同时保持表的其余部分不变。

以下是我正在尝试做的事情的一个示例

这是我的桌子上的一个Codepen：

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>