html - 使 1 张桌子看起来像 2 张桌子放在一起

Question

我想让 1 张桌子看起来像 2 张桌子，它们彼此叠放，它们之间有一点空间。每个表的列数相同，但它们包含的文本可能不同。每个表可以包含许多行。我需要这个，因为我需要两个表的列总是相同的宽度。我如何实现这一目标？我需要那个空行的侧边框来隐藏

<table>
  <tr> <!-- First table rows --> </tr>
    <td>text</td>
    <td>text</td>

  <tr> <!-- Empty space between tables --> </tr>

  <tr> <!-- Second table rows --> </tr>
    <td>text</td>
    <td>text</td>

标签： htmlcss

Answer 1

只需使用具有特定高度的单个<td>元素作为分隔符，并使用它border-collapse来模仿您正在寻找的内容：

table {
  border-collapse: collapse;
}

table td {
  border: 1px solid #000;
}

table td.separator {
  border: none;
  height: 40px;
}

<table>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td colspan="2" class="separator"></td>
  </tr>

  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
</table>