Question

我创建了一个HTML页面。我在其中有一张显示客户数据的表格。现在我想调用一个样式，它会调用表格行的背景，我正在调用但是我遗漏了一些东西，因为tr没有显示行背景。此外，我试图在行之间添加空格，但不在列之间添加空格，但我在列和行之间获得空间。

例如，我已将背景添加到两个<tr>

<style type="text/css">
        td.tableHeader
        {
            color: #003678;
            font-size: 40px;
            font-family: Open Sans;
            text-align: center;
            font-weight: inherit;
        }
        tr.background
        {
            bgcolor: #D0D1CB;
        }


        </style>
</head>

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
    <tr>
    <!-- ============ HEADER SECTION ============== -->
        <td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td>
    </tr>
</table>



<!-- ============ (CONTENT) ============== -->


 <table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0"
        width="100%" align="center">
        <tr>
            <td class="tableHeader">
                Table header
            </td>
        </tr>
        <tr>
            <td>
                <table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="500" align="center" >
                   <tr>
                        <td>
                            <table class="background" border="0" cellpadding="0" cellspacing="3" width="500" align="center">
                                <tr bgcolor="#D0D1CB">
                                    <td>
                                        Full Name
                                    </td>
                                    <td>
                                        Abc BCA
                                    </td>
                                </tr >
                                <tr bgcolor="#D0D1CB">
                                    <td>
                                        Phone Number:
                                    </td>
                                    <td>
                                        2314568970
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Email Address:
                                    </td>
                                    <td>
                                        abc@gmail.com
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        CustomerID:
                                    </td>
                                    <td>
                                        5566778
                                    </td>
                                </tr>

                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
<table width="100%" style="cellpadding="0" cellspacing="0" border="0">
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>

<html>

Answer 1

您只能将bgcolor用作内联属性，而不能用作样式参数。您正在寻找的内容有background或background-color。

您需要从父table元素中删除一些属性，例如cellspacing="3"，它会为您提供表格单元格周围的空间。如果删除此属性，则可以向表格单元格添加与背景颜色相同的边框;它会以你需要的方式将它们分开。请参阅下面的代码段：

＆＃13;

td.tableHeader {
  color: #003678;
  font-size: 40px;
  font-family: Open Sans;
  text-align: center;
  font-weight: inherit;
}
tr.background {
  background: #D0D1CB;
}

.dataTbl td {
    border-collapse: collapse;
    border-bottom: 3px solid #e8e9e2;
}

.dataTbl tr {
    border-collapse: collapse;
}

＆＃13;

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
    <tr>
    <!-- ============ HEADER SECTION ============== -->
        <td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td>
    </tr>
</table>



<!-- ============ (CONTENT) ============== -->


 <table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0"
        width="100%" align="center">
        <tr>
            <td class="tableHeader">
                Table header
            </td>
        </tr>
        <tr>
            <td>
                <table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="500" align="center" >
                   <tr>
                        <td>
                            <table class="background dataTbl" border="0" cellpadding="0" cellspacing="0" width="500" align="center">
                                <tr class="background">
                                    <td>
                                        Full Name
                                    </td>
                                    <td>
                                        Abc BCA
                                    </td>
                                </tr >
                                <tr class="background">
                                    <td>
                                        Phone Number:
                                    </td>
                                    <td>
                                        2314568970
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Email Address:
                                    </td>
                                    <td>
                                        abc@gmail.com
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        CustomerID:
                                    </td>
                                    <td>
                                        5566778
                                    </td>
                                </tr>

                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
<table width="100%" style="cellpadding="0" cellspacing="0" border="0">
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>

<html>

＆＃13;

table.background.dataTbl {
    border-spacing: 0 3px;
}

＆＃13;

table.background.dataTbl {
    border-spacing: 0 3px;
}

td.tableHeader {
  color: #003678;
  font-size: 40px;
  font-family: Open Sans;
  text-align: center;
  font-weight: inherit;
}
tr.background {
  background: #D0D1CB;
}

＆＃13;

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
    <tr>
    <!-- ============ HEADER SECTION ============== -->
        <td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td>
    </tr>
</table>



<!-- ============ (CONTENT) ============== -->


 <table class="wrapper" bgcolor="#E8E9E2" border="0" cellpadding="0" cellspacing="0"
        width="100%" align="center">
        <tr>
            <td class="tableHeader">
                Table header
            </td>
        </tr>
        <tr>
            <td>
                <table class="wrapper" border="0" cellpadding="0" cellspacing="0" width="500" align="center" >
                   <tr>
                        <td>
                            <table class="background dataTbl" border="0" cellpadding="0" cellspacing="0" width="500" align="center">
                                <tr class="background">
                                    <td>
                                        Full Name
                                    </td>
                                    <td>
                                        Abc BCA
                                    </td>
                                </tr >
                                <tr class="background">
                                    <td>
                                        Phone Number:
                                    </td>
                                    <td>
                                        2314568970
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Email Address:
                                    </td>
                                    <td>
                                        abc@gmail.com
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        CustomerID:
                                    </td>
                                    <td>
                                        5566778
                                    </td>
                                </tr>

                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
<table width="100%" style="cellpadding="0" cellspacing="0" border="0">
<!-- ============ FOOTER SECTION ============== -->
<tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright ©</td></tr>
</table>
</body>

<html>

＆＃13;

为表数据创建样式css到tr

1 个答案: