加入多个html表格时防止双边框-边框折叠不起作用答案

【问题标题】：Prevent double border when joining multiple html table - border-collapse not working加入多个html表格时防止双边框-边框折叠不起作用
【发布时间】：2017-08-17 16:41:25
【问题描述】：

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

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

【问题讨论】：

标签： css html-table border

【解决方案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>

【讨论】：