CODEWITHSUNDEEP
htmlcsshtml-table
Kartic
Kartic

Reputation: 2985

HTML outer and inner table with different border color using CSS

I have a HTML table inside another table. Styles of both tables are defined in CSS. I want inner and outer table with different border color. But somehow inner table is taking border color of outer table. Below is the code -

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="common.css">
</head>
<body>
    <table width="100%" class="OuterTableStyle1"><tr><td>
    <table width="100%" class="CommonTableStyle1" >
            <tr>
                <th>Title 1</th>
                <th>Title 2</th>
            </tr>
            <tr>
                 <td>Data 1</td>
                 <td>Data 2</td>
            </tr>
    </table>
    </td></tr></table>
</body>
</html>

CSS:

/*======= Start : Common data table style =========*/
table.CommonTableStyle1 td
   {
   vertical-align:middle;
   padding:5px;
   font-size:11px;
   font-family:Arial;
   font-weight:normal;
   color:#000000;
   }

table.CommonTableStyle1 th, table.CommonTableStyle1 td
   {
   border: 1px solid #525272    ;
   }

table.CommonTableStyle1
   {
   border-collapse:collapse;
   }
/*======= End : Common data table style =========*/


/*=== Start : This table is used as border of another scrollable table ===*/
table.OuterTableStyle1 
   {
   border-collapse:collapse;
   }
table.OuterTableStyle1 th, table.OuterTableStyle1 td
   {
   border: 1px solid red;
   }
/*=== End : This table is used as border of another scrollable table ===*/

Please help.

[Edited CSS]

/*======= Start : Common data table style =========*/
table.CommonTableStyle1 td
   {
   vertical-align:middle;
   padding:5px;
   font-size:11px;
   font-family:Arial;
   font-weight:normal;
   color:#000000;
   }

table.CommonTableStyle1 th, table.CommonTableStyle1 td
   {
   border: 1px solid #525272    ;
   }

table.CommonTableStyle1
   {
   border-collapse:collapse;
   }
/*======= End : Common data table style =========*/


/*=== Start : This table is used as border of another scrollable table ===*/
table.OuterTableStyle1 
   {
   border-collapse:collapse;
   border: 1px solid red;
   }
/*=== End : This table is used as border of another scrollable table ===*/

Upvotes: 0

Views: 2213

Answers (1)

Mr Lister
Mr Lister

Reputation: 46569

The selector 

table.CommonTableStyle1 table, th, td

doesn't work properly, because there is no table in the table with class "CommonTableStyle1".

I think you meant to do this:

table.CommonTableStyle1 th, table.CommonTableStyle1 td

See fiddle

Also, the bottommost selector did work, but not in the way you may think. The th, td part had the same specificity as the one above, so it would take this style for all ths and tds, because this one came later. But it's OK now, since we've made the specificity of the above one larger.

Upvotes: 3

Related Questions