Uncode Uncode - 1 month ago 6
CSS Question

How can I remove the border around all the cells in a table?

I have a table structured like the one below and it is a on page with a gray background. The problem I am having is removing the cell borders.

<table width="510">
<tbody>
<tr>
<td style="background-color: #fff;" colspan="2" width="510"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<tdstyle="background-color: #fff;"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<td style="background-color: #fff;"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>


This is what it looks like no matter what I have tried such as adding a .no-border class
border:0;
to the or adding inline css to the . It still comes out like this...

enter image description here

How can I remove the border around all the cells?

Answer

You need to remove the cellspacing like this:

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

This is equivalent for the cellspacing="0" HTML attribute. See this example:

body {
  background: grey;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
<table width="510">
  <tbody>
    <tr>
      <td style="background-color: #fff;" colspan="2" width="510">t</td>
    </tr>
    <tr>
      <td style="background-color: #fff;">t</td>
      <td style="background-color: #fff;">t</td>
    </tr>
    <tr>
      <td style="background-color: #fff;">t</td>
      <td style="background-color: #fff;">t</td>
    </tr>
    <tr>
      <td colspan="2">t</td>
    </tr>
  </tbody>
</table>