Make several cells of an HTML table appear joined without being so

Question

I have a table in html and I need to make several cells appear joined, without being actually joined. This because each cell must have a different background.

So I need to take away the right border from the left most cell; take away the left border from the right most cells; take away both border from the central cells.

Here is an example where I have a table with two rows, and 7 cells. In the second row, the cells should appear as being only 2 cells. One spanning 5 columns and one spanning 7.

<table>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td style="background-color:white; border-right: blank; border-left: solid;"  >foo</td>
<td style="background-color:green; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:black; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:yellow; border-right: blank; border-left: blank;"  ></td>
<td style="background-color:blue; border-right: solid; border-left: blank;"  ></td>

<td style="background-color:red; border-right: blank; border-left: solid;"  >foo</td>
<td style="background-color:pink; border-right: solid; border-left: blank;"  ></td>

</tr>
</table>

But then this is still not enough because there is still some background of the table that is shown between the cells. How do I take of that?

Answer 1

Give your table a class

<table class="myTable">
    <!-- Your Rows/Cells -->
</table>

Then with CSS do the following:

.myTable { 
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0; 
    padding: 0; 
}

Also border:blank is incorrect, use border:none instead.