This is how I need my table to look:
I need to add a solid border beneath the table heading row. However, I also need to have spacing between the cells of the table. I have to use the border-collapse property on the table in order to get spacing between the gray cells, and "border-collapse: separate" prevents me from adding a bottom border to the heading row.
How can I add a solid border beneath the table header while also maintaining the spacing between the table columns?
These are the styles I have; the border-collapse style negates the border-bottom. When I remove the border-collapse, the border-bottom works.
tr.heading{
border-bottom: 1px solid black;
}
table{
border-collapse: separate;
}
Here's a fiddle: https://jsfiddle.net/8u9krzyg/