CODEWITHSUNDEEP
htmlcsscss-tables
Uncode
Uncode

Reputation: 189

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 <tr> or adding inline css to the <td>. It still comes out like this...

enter image description here

How can I remove the border around all the cells?

Upvotes: 1

Views: 920

Answers (1)

andreas
andreas

Reputation: 16936

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>

Upvotes: 4

Related Questions