How do I collapse the gaps in my table style?

Question

I have a table that I have to build via code, because it's representing grouped data from a query based on a person's name. So person xyz has 4 rows of data... My question is simply how do I style this for each group alternating in color?

Here's what I have so far and it works, but there's gaps on the sides, top and bottom of each cell, I want the color for the groups to be solid.... no gaps... I've given the table rows and td the class name of alternate for the ones to be colored..alternate

tr.alternate{background-color:#aaa;}
td.alternate{background-color:#aaa}

Answer 1

You can use border-collapse: collapse in your table.

The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

In the collapsed border model, adjacent table cells share borders. In that model, the border-style value of inset behaves like groove, and outset behaves like ridge.

source: border-collapse developer mozilla

Example without border-collapse:

tr.alternate {
  background-color: #aaa;
}

<table>
  <tr class="alternate">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr class="alternate">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

Example with border-collapse:

table {
  border-collapse: collapse;
}
tr.alternate {
  background-color: #aaa;
}

<table>
  <tr class="alternate">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
  <tr class="alternate">
    <td>test</td>
    <td>test</td>
    <td>test</td>
  </tr>
</table>

As you can see you don't need separate class for td.