带边框和边框的HTML CSS表

Question

试图在table-rows上设置borders 。 如果表格具有border-collapse则应用边框，但随后表格将丢失应用的填充。

如何在不丢失衬垫的情况下在绿色桌子上获得red-borders ？ http://jsfiddle.net/r11xa2un/

<style>
table {
    padding: 0 20px;
    background-color: green;
}
table.two {
    border-collapse: collapse;
    background-color:orange;
}
table tr {
    border-bottom: 2px solid red;
}
</style>

<table>
    <tbody>
        <tr>
            <th>Lorem ipsum</th>
            <td>Dolor sit amet</td>
        </tr>
        <tr>
            <th>Lorem ipsum</th>
            <td>Amet sit ipsum</td>
        </tr>
    </tbody>
</table>

<table class="two">
    <tbody>
        <tr>
            <th>Lorem ipsum</th>
            <td>Dolor sit amet</td>
        </tr>
        <tr>
            <th>Lorem ipsum</th>
            <td>Amet sit ipsum</td>
        </tr>
    </tbody>
</table>

Answer 1

只需添加左填充到th S和右填充到td S插入第二个table 。

table.two th {padding-left: 20px;}
table.two td {padding-right: 20px;}

http://jsfiddle.net/r11xa2un/3/

当表格未折叠时，无法为行添加颜色，因为要在单元格之间存在垂直间隔（因此行边界将是不连续的）。

Answer 2

你期待这样的事情： DEMO

CSS：

table {
    border-collapse: collapse;
    background-color: green;
}
table.two {
    border-collapse: collapse;
    background-color:orange;
}
table tr {
    padding: 0 20px;
    display: block;
    border-bottom: 2px solid red;
}

Answer 3

我已经像以前一样制作了表格，但是每个<tr>元素的底部都有一个边框。

 table { background-color: green; border-collapse: collapse; } table.one tr th{ padding-left: 20px; } table.one tr td{ padding-right: 20px; } table.two { border-collapse: collapse; background-color:orange; } table tr { border-bottom: 2px solid red; } 

 <table class="one"> <tbody> <tr> <th>Lorem ipsum</th> <td>Dolor sit amet</td> </tr> <tr> <th>Lorem ipsum</th> <td>Amet sit ipsum</td> </tr> </tbody> </table> <table class="two"> <tbody> <tr> <th>Lorem ipsum</th> <td>Dolor sit amet</td> </tr> <tr> <th>Lorem ipsum</th> <td>Amet sit ipsum</td> </tr> </tbody> </table> 

http://jsfiddle.net/r11xa2un/16/