html - How can I set border and padding to the table rows? -
i add divisions , padding between rows, i've noticed row borders displayed border-collapse: collapse
, removes padding <tr>
element. 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 remove border-collapse: collapse
, can see padding, not horizontal lines between rows: 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 add border , padding <tr>
?
thanks.
if want set both border
, padding
in table layout, it's better set on td
rather tr
, make sure work across browsers correctly.
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>
Comments
Post a Comment