CSS - 表格行背景色填充全部填充空間

我有一個HTML表看起來像這樣：CSS - 表格行背景色填充全部填充空間

<table style="border-spacing: 10px"> 
<tr style='background-color:red'> 
    <td><b>Member</b></td> 
    <td><b>Account #</b></td> 
    <td><b>Site</b></td> 
    <td><b>Date</b></td> 
</tr> 
</table>

元素之間的填充是好的，但背景顏色似乎只能填補了TDS和由於填充/間距而留下很多空白。我如何使TR背景顏色填充整行，並流過10px邊框間距？

來源

2014-02-28 HerrimanCoder

使用border-collapse:collapse;崩潰的空白，並添加您需要任何填充：

table { 
    border-collapse:collapse; 
} 
td { 
    padding: 8px; 
}

jsFiddle example

來源

2014-02-28 21:07:54 j08691

完美，謝謝。 – HerrimanCoder

應用背景的table不上tr：

<table style="border-spacing: 10px; background-color:red;"> 
<tr style=''> 
    <td><b>Member</b></td> 
    <td><b>Account #</b></td> 
    <td><b>Site</b></td> 
    <td><b>Date</b></td> 
</tr> 
</table>

http://jsfiddle.net/helderdarocha/C7NBy/

來源

2014-02-28 21:09:09 helderdarocha

你可以做以下的事情：

1）HTML + CSS

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table 
{ 
    border-collapse: separate; 
    /*this is by default value of border-collapse property*/ 
    border-spacing: 0px; 
    /*this will remove unneccessary white space between table cells and between table cell and table border*/ 
} 
th,td 
{ 
    background-color: red; 
    padding: 5px; 
} 
</style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td><b>Member</b></td> 
      <td><b>Account #</b></td> 
      <td><b>Site</b></td> 
      <td><b>Date</b></td> 
     </tr> 
    </table> 
</body> 
</html>

或者，

2）HTML + CSS

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table 
{ 
    border-collapse: collapse; 
} 
th,td 
{ 
    background-color: red; 
    padding: 5px; 
} 
</style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td><b>Member</b></td> 
      <td><b>Account #</b></td> 
      <td><b>Site</b></td> 
      <td><b>Date</b></td> 
     </tr> 
    </table> 
</body> 
</html>

如果您需要使所有表格條目加粗，您可以執行以下操作：

<!DOCTYPE html> 
<html> 
<head> 
<style> 
table 
{ 
    border-collapse: collapse; 
} 
th,td 
{ 
    background-color: red; 
    padding: 5px; 
    font-weight: bold; 
} 
</style> 
</head> 
<body> 
    <table> 
     <tr> 
      <td>Member</td> 
      <td>Account #</td> 
      <td>Site</td> 
      <td>Date</td> 
     </tr> 
    </table> 
</body> 
</html>

來源

2016-05-23 14:12:07 sayaksan

CSS - 表格行背景色填充全部填充空間

回答

相關問題