user131799 user131799 - 2 months ago 6
CSS Question

Creating style css to tr for the table data

I have created an HTML page. In which I am having a table which shows customer's Data. Now I wanted to call a style which will call table row which background, I am calling that but I am missing something due to which tr doesnot show row background. Also I am trying to add space between rows but not between column but I am getting space between both column and rows.

For an example, I have added background to two

<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

You can use bgcolor only as an inline attribute, but not as a styling parameter. What you're looking for there is background or background-color.

You'll need to remove a few attributes from the parent table element, like cellspacing="3", which is giving you the space you see around table cells. If you remove this attribute, you can add a border, with the same color as your background, to the table cells; which will separate them in the way you need. See code snippet below:

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;
}
<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>

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

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;
}
<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>