带有填充和边框的HTML CSS表格

试图在table-rows上获取borders。如果表格有border-collapse，则应用边界，但表格会丢失应用的填充。带有填充和边框的HTML CSS表格

如何获得绿色表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>

来源

2015-02-12 caramba

你想为表或单元格底部边框？ – 2015-02-12 09:11:07

@Kiran'border-bottom' for every table row so so''should habe a bottom border – caramba 2015-02-12 09:13:44

你希望是这样的：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; 
}

来源

2015-02-12 09:20:37

是的！谢谢，那就是我一直在寻找的！ – caramba 2015-02-12 09:22:10

@caramba：请注意，重新键入表格行到'display：block'根本不是一个好主意，而不是看起来有效的情况。 – panther 2015-02-12 09:31:13

@caramba：更新：上面的解决方案只是因为'TH's是相同的文本。查看当您更改其中的文本时会发生什么 - http://jsfiddle.net/r11xa2un/18/。用'display：block'表丢失了表的行为。 – panther 2015-02-12 09:49:56

刚出填充到th S和右填充添加到td S插入第二table。

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

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

没有办法如何把颜色时未折叠表行，因为有细胞之间的垂直空间（所以行边界将是不连续的）。

来源

2015-02-12 09:10:17 panther

谢谢你的回答。它有点诀窍。有时候我有没有''的桌子，那就会刹车。这就是为什么将填充应用到最外层（表格）元素上的原因。＃ – caramba 2015-02-12 09:15:15

@caramba：'td：first-child'是每一行中的第一个td（与您的示例中的“th”相同）。最后一个是'td：last-child'，或者在旧版浏览器中支持，您可以创建一个类似于“td + td + td + td”的选择器，以便连续使用四个“TD”。看，http://jsfiddle.net/r11xa2un/17/ – panther 2015-02-12 09:27:10

我所做的表完全一样，你有过，但在底部，每一个边框<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"> 
 
\t <tbody> 
 
\t \t <tr> 
 
\t \t \t <th>Lorem ipsum</th> 
 
\t \t \t <td>Dolor sit amet</td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t \t <th>Lorem ipsum</th> 
 
\t \t \t <td>Amet sit ipsum</td> 
 
\t \t </tr> 
 
\t </tbody> 
 
</table> 
 

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

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

来源

2015-02-12 09:30:38

带有填充和边框的HTML CSS表格

回答

相关问题