加入多个 html table 时防止双边框 - 边框折叠不起作用

Question

请帮我防止在连接多个 html table 时出现双边框。我尝试使用 "border-collapse:collapse" 但它不起作用。两个 table.

之间的边框仍然是双倍的

<table style="border:1px solid black;border-collapse:collapse;width:100%">
     <tr>
      <td rowspan="3">Heading-1</td>
      <td>Heading-2</td>
      <td>Heading-3</td>
     </tr>
     <tr>
      <td>Heading-4</td>
      <td>Heading-5</td>
     </tr>
     <tr>
      <td>Heading-6</td>
      <td>Heading-7</td>
     </tr>
    </table>
    <table style="border:1px solid black;border-collapse:collapse;width:100%">
     <tr>
      <td rowspan="3">Heading-1</td>
      <td>Heading-2</td>
      <td>Heading-3</td>
     </tr>
     <tr>
      <td>Heading-4</td>
      <td>Heading-5</td>
     </tr>
     <tr>
      <td>Heading-6</td>
      <td>Heading-7</td>
     </tr>
    </table>
<table style="border:1px solid black;border-collapse:collapse;width:100%">
 <tr>
  <td rowspan="3">Heading-1</td>
  <td>Heading-2</td>
  <td>Heading-3</td>
 </tr>
 <tr>
  <td>Heading-4</td>
  <td>Heading-5</td>
 </tr>
 <tr>
  <td>Heading-6</td>
  <td>Heading-7</td>
 </tr>
</table>

Answer 1

只需将 margin-top: -1px; 添加到您的 table。

table {
  margin-top: -1px;
}

<table style="border:1px solid black;border-collapse:collapse;width:100%">
  <tr>
    <td rowspan="3">Heading-1</td>
    <td>Heading-2</td>
    <td>Heading-3</td>
  </tr>
  <tr>
    <td>Heading-4</td>
    <td>Heading-5</td>
  </tr>
  <tr>
    <td>Heading-6</td>
    <td>Heading-7</td>
  </tr>
</table>
<table style="border:1px solid black;border-collapse:collapse;width:100%">
  <tr>
    <td rowspan="3">Heading-1</td>
    <td>Heading-2</td>
    <td>Heading-3</td>
  </tr>
  <tr>
    <td>Heading-4</td>
    <td>Heading-5</td>
  </tr>
  <tr>
    <td>Heading-6</td>
    <td>Heading-7</td>
  </tr>
</table>
<table style="border:1px solid black;border-collapse:collapse;width:100%">
  <tr>
    <td rowspan="3">Heading-1</td>
    <td>Heading-2</td>
    <td>Heading-3</td>
  </tr>
  <tr>
    <td>Heading-4</td>
    <td>Heading-5</td>
  </tr>
  <tr>
    <td>Heading-6</td>
    <td>Heading-7</td>
  </tr>
</table>

加入多个 html table 时防止双边框 - 边框折叠不起作用

Prevent double border when joining multiple html table - border-collapse not working

css

html-table

border