I try to put a margin
and a border-bottom
at the same time in a label <tr>
but it doesn't work for me, I managed to put the border in the following way:
border-collapse: separate;
border-spacing: 0px 20px;
But when I remove that fragment css
I get the edge, obviously without the space I want. How can I create a margin between tr
and at the same time create a border
bottom?
table{
border-collapse: separate;
border-spacing: 0px 20px;
}
table tr{
background-color: #00ff00;
border-bottom: 1pt solid #c10c0c;
}
<table>
<tr>
<td>
<p>Cualquier cosa</p>
</td>
</tr>
<tr>
<td>
<p>Cualquier cosa</p>
</td>
</tr>
<tr>
<td>
<p>Cualquier cosa</p>
</td>
</tr>
</table>
I leave you an example in snippet
but the edges do not come out, it is better that you try locally
According to CSS section 17.6 in the separated border model that you are using, rows (tr) cannot have borders. If you want to be able to give border to the tr you have to put the code in the following way.
CSS
HTML
As you may have noticed there is a problem and it is that the margin obviously does not work since it is in collapse mode but the collapse is necessary to be able to give the tr a border.
In order to have the margin you have to give the td an edge, you have no other choice.
CSS
HTML