加入多個html表時防止出現雙邊框 - border-collapse不起作用

Question

請幫助我在加入多個html表時防止出現雙邊框。我試圖使用「邊界崩潰：崩潰」，但它不工作。兩個表格之間的邊界仍然是兩倍。

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