css - 表格行背景颜色填充所有填充空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22105751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css - table row background color fill all padding space
提问by HerrimanCoder
I have an html table that looks like this:
我有一个如下所示的 html 表：
<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>
The padding in between the elements is fine, but the background color seems to only fill the TDs and leave lots of gaps because of padding/spacing. How can I make the TR background color fill the entire row, and flow through the 10px border spacing?
元素之间的填充很好，但背景颜色似乎只填充了 TD，并且由于填充/间距而留下了很多空白。如何让TR背景色填满整行，并流过10px的边框间距？
回答by j08691
Use the border-collapse:collapse;to collapse the gaps and add any padding you need with:
使用border-collapse:collapse;来折叠间隙并添加您需要的任何填充：
table {
border-collapse:collapse;
}
td {
padding: 8px;
}
回答by helderdarocha
Apply the background on the tablenot on the tr:
将背景应用在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>
回答by sayaksan
You can do the following things:
您可以执行以下操作：
1)HTML+CSS
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>
Or,
或者，
2) HTML+CSS
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>
And if you need to make all the table entries bold, you can do the following:
如果您需要将所有表格条目设为粗体，您可以执行以下操作：
<!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>
