html - 如何为表格行设置边框和填充？

Question

我想在行之间添加分隔和填充，但我注意到行边框显示为 border-collapse: collapse ，但这会删除 <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>    

所以我删除了 border-collapse: collapse我可以看到填充，但看不到行之间的水平线: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>    

那么如何为 <tr> 添加边框和内边距呢？ ？

谢谢。

Answer 1

如果要在表格布局中同时设置 border 和 padding，最好将其设置在 td 而不是tr，这将确保它在浏览器中正常工作。

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>