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上设置它，这将确保它正确地在浏览器中工作。

＆＃13;

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;
}

＆＃13;

<table>
    <tr>
        <td>Header</td>
    </tr>
    <tr>
        <td>Cell</td>
    </tr>
    <tr>
        <td>Another Cell</td>
    </tr>
</table>

＆＃13;

如何设置表格行的边框和填充？

1 个答案: