After working on an HTML table element, I decided to include some space between the columns. To achieve this, I used the following css properties:
table {
border-collapse: separate;
border-spacing: 36px 0px;
}
However, I encountered an issue when attempting to add a border-bottom to the entire row - including both the header and each tr in the body. Unfortunately, the border did not appear as expected. This is the code I tried:
tr {
border-bottom: 1px solid blue;
}
Interestingly enough, the border only appeared when I used the following code:
table {
border-collapse: collapse;
}
But this solution removed the margin between columns that I had previously set up.
To see a demonstration of my issue, check out my DEMO here.