How do I collapse breaks in my table style?
I have a table that I need to build through code because it represents the grouped data from a query based on the person's name. So man xyz has 4 lines of data ... My question is how to do this for each group alternating in color?
Here is what I have so far and it works, but there are spaces on the sides, top and bottom of each cell, I want the color for the groups to be solid ... no spaces ... I gave the table rows and td the name of the alternate class for those to be colored .. alternate
tr.alternate{background-color:#aaa;}
td.alternate{background-color:#aaa}
source to share
You can use border-collapse: collapse
in your table.
The border-collapsed CSS property selects the table border model. This has a big impact on the appearance and style of table cells.
The split model is the traditional HTML table border model. Adjacent cells have their own borders. The distance between them, specified by the border-spacing property.
In a folded border model, adjacent table cells share borders. In this model, the border style insert value behaves like a groove and the start behaves like a 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 a separate class for td
.
source to share