Mostafa Emon Mostafa Emon - 5 months ago 28
CSS Question

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

Please help me to prevent double border when joining multiple html table. I have tried to use "border-collapse:collapse" but its not working. Still border is double between two 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 Source

Just add margin-top: -1px; to your 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>