问如何在一个<td>单元格中创建两列？

EN

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