Question

我有一个看起来像这样的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>

元素之间的填充很好，但是背景颜色似乎只填充TD并且由于填充/间距而留下大量间隙。如何使TR背景颜色填充整行，并流过10px边框间距？

Answer 1

使用border-collapse:collapse;折叠空白并添加所需的任何填充：

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

<强> jsFiddle example

Answer 2

将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/

Answer 3

您可以执行以下操作：

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>

css - 表格行背景颜色填充所有填充空间

3 个答案: