Question

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

@Bean
public WebServiceTemplate webServiceTemplate() {
    WebServiceTemplate webServiceTemplate = new WebServiceTemplate();
    // add your current configuration here

    ClientInterceptor[] interceptors = {new AddCustomSecurityHeader()};
    webServiceTemplate.setInterceptors(interceptors);
    return webServiceTemplate;
}

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

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>

如何将表格行分为两列？

2 个答案: