帶有填充和邊框的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表格

回答

相關問題