2017-08-17 12 views
1

请帮助我在加入多个html表时防止出现双边框。我试图使用“边界崩溃:崩溃”,但它不工作。两个表格之间的边界仍然是两倍。加入多个html表时防止出现双边框 - border-collapse不起作用

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

回答

0

只需添加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>