How do I set border and padding on table rows?
I would like to add divisions and padding between the lines, but I noticed that the borders of the lines are displayed with border-collapse: collapse
, but this removes the padding for the element <tr>
. https://jsfiddle.net/c8ht9aso/
<table style="border: 1px solid red; border-collapse: collapse; padding: 20px">
<tr>
<td>Header</td>
</tr>
<tr style="border-top:1px solid blue; vertical-align: top; padding: 20px">
<td>Cell</td>
</tr>
<tr style="border-top:1px solid green; vertical-align: top; padding: 20px">
<td>Another Cell</td>
</tr>
</table>
So, I delete border-collapse: collapse
and I see padding, but not horizontal lines between the lines: https://jsfiddle.net/0mecu52u/
<table style="border: 1px solid red; padding: 20px">
<tr>
<td>Header</td>
</tr>
<tr style="border-top:1px solid blue; vertical-align: top; padding: 20px">
<td>Cell</td>
</tr>
<tr style="border-top:1px solid green; vertical-align: top; padding: 20px">
<td>Another Cell</td>
</tr>
</table>
So how can I add a border and padding to <tr>
?
Thank.
source to share
If you want to set both border
and padding
in the table layout, it is best to set it to td
rather than to tr
, to make sure it works correctly in browsers.
table {
border: 1px solid red;
border-collapse: collapse;
}
td {
vertical-align: top;
padding: 20px;
}
tr:nth-child(1) td {
border-bottom: 1px solid blue;
}
tr:nth-child(2) td {
border-bottom: 1px solid green;
}
<table>
<tr>
<td>Header</td>
</tr>
<tr>
<td>Cell</td>
</tr>
<tr>
<td>Another Cell</td>
</tr>
</table>
source to share