如何将表格行拆分为两列？

Question

我有一个三列的表。但我需要第 9 行，第 1 列和第 3 列将分成 2 列。我有一些 stackoverflow 答案，但这些并没有解决我的问题。我想要如下图最后一行：

JSFIDDLE HERE.

.tg {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0px auto;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 12px 85px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 12px 85px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-0pky {
  border-color: inherit;
  text-align: left;
  vertical-align: top
}

<table class="tg">
  <tr>
    <th class="tg-0pky">Applicants</th>
    <th class="tg-0pky"></th>
    <th class="tg-0pky">Joint Applicants</th>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">Current last name or single name</td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">First and middle names</td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">Marital Status</td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky">Country of divorce</td>
    <td class="tg-0pky" rowspan="3">If divorced</td>
    <td class="tg-0pky">Country of divorce</td>
  </tr>
  <tr>
    <td class="tg-0pky">City of divorce if in Canada</td>
    <td class="tg-0pky">City of divorce if in Canada</td>
  </tr>
  <tr>
    <td class="tg-0pky">Court file number</td>
    <td class="tg-0pky" colspan="2">Court file number</td>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">Religious denomination</td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">Age and date of birth</td>
    <td class="tg-0pky"></td>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">Place of birth</td>
    <td class="tg-0pky"></td>
  </tr>
</table>

Answer 1

简短的回答是：您不能将单个单元格拆分为多个单元格，除非您在所有其他行中也这样做。然后，那些其他行可以在您希望将 2 个单元格合并为一个单元格以获得所需效果的地方实现 colspan=2 属性。

但这里的问题是您根本不应该使用该表，我强烈建议您不要这样做。表只能用于表格数据。对于布局，您应该使用 flexbox 或 Bootstrap 中的网格系统和类似的 CSS 框架或任何其他依赖 CSS 的东西。我怎么强调都不过分。在可访问性、可用性、语义、SEO 等方面不使用它的原因有很多。请在此处阅读更多信息：Why not use tables for layout in HTML?

Answer 2

试试这个

<!-- Head -->
  <tr>
    <th class="tg-0pky" colspan="2">Applicants</th>
    <th class="tg-0pky"></th>
    <th class="tg-0pky" colspan="2">Joint Applicants</th>
  </tr>
  <!-- 1 -->
  <tr>
    <td class="tg-0pky" colspan="2"></td>
    <td class="tg-0pky">Current last name or single name</td>
    <td class="tg-0pky" colspan="2"></td>
  </tr>
  <!-- 2 -->
  <tr>
    <td class="tg-0pky" colspan="2"></td>
    <td class="tg-0pky">First and middle names</td>
    <td class="tg-0pky" colspan="2"></td>
  </tr>
  <!-- 3 -->
  <tr>
    <td class="tg-0pky" colspan="2"></td>
    <td class="tg-0pky">Marital Status</td>
    <td class="tg-0pky" colspan="2"></td>
  </tr>
  <!-- 4 -->
  <tr>
    <td class="tg-0pky" colspan="2">Country of divorce</td>
    <td class="tg-0pky" rowspan="3">If divorced</td>
    <td class="tg-0pky" colspan="2">Country of divorce</td>
  </tr>
  <!-- 5 -->
  <tr>
    <td class="tg-0pky" colspan="2">City of divorce if in Canada</td>
    <td class="tg-0pky" colspan="2">City of divorce if in Canada</td>
  </tr>
  <!-- 6 -->
  <tr>
    <td class="tg-0pky" colspan="2">Court file number</td>
    <td class="tg-0pky" colspan="2">Court file number</td>
  </tr>
  <!-- 7 -->
  <tr>
    <td class="tg-0pky" colspan="2"></td>
    <td class="tg-0pky">Religious denomination</td>
    <td class="tg-0pky" colspan="2"></td>
  </tr>
  <!-- 8 -->
  <tr>
    <td class="tg-0pky" colspan="2"></td>
    <td class="tg-0pky">Age and date of birth</td>
    <td class="tg-0pky" colspan="2"></td>
  </tr>
  <!-- 9 -->
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky">Place of birth</td>
    <td class="tg-0pky"></td>
    <td class="tg-0pky"></td>
  </tr>
</table>