使用CSS使用不同边框颜色的HTML外部和内部表格_Html_Css_Html Table

使用CSS使用不同边框颜色的HTML外部和内部表格

html css

使用CSS使用不同边框颜色的HTML外部和内部表格,html,css,html-table,Html,Css,Html Table,我在另一个表中有一个HTML表。两个表的样式都在CSS中定义。我想要有不同边框颜色的内桌和外桌。但不知何故，内表采用了外表的边框颜色。下面是代码- HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="common.css"> </head> <body> <table width="100%"

我在另一个表中有一个HTML表。两个表的样式都在CSS中定义。我想要有不同边框颜色的内桌和外桌。但不知何故，内表采用了外表的边框颜色。下面是代码-

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>

/*======= 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 ===*/

请帮忙

[编辑的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 ===*/

选择器

table.CommonTableStyle1 table, th, td

无法正常工作，因为表中没有类为“CommonTableStyle1”的表

我想你是有意这么做的：

table.CommonTableStyle1 th, table.CommonTableStyle1 td

看

此外，最底层的选择器确实起作用，但不是以您可能认为的方式。

th，td

部分与上面的部分具有相同的特异性，因此所有

th

s和

td

s都将采用这种样式，因为这一部分出现得较晚。但是现在没关系了，因为我们已经把上面一个的特异性放大了。

选择器

table.CommonTableStyle1 table, th, td

无法正常工作，因为表中没有类为“CommonTableStyle1”的表

我想你是有意这么做的：

table.CommonTableStyle1 th, table.CommonTableStyle1 td

看

此外，最底层的选择器确实起作用，但不是以您可能认为的方式。

th，td

部分与上面的部分具有相同的特异性，因此所有

th

s和

td

s都将采用这种样式，因为这一部分出现得较晚。但现在没关系了，因为我们已经扩大了上述问题的特殊性。

嗨，李斯特先生，你的回答对我很有用。但是，如果我像问题中所示更改代码，同样的事情也会发生。你能帮我解决这个问题吗？编辑的css部分的代码有效。谢谢李斯特先生指出我的错误。嗨，李斯特先生，你的回答对我很有用。但是，如果我像问题中所示更改代码，同样的事情也会发生。你能帮我解决这个问题吗？编辑的css部分的代码有效。谢谢李斯特先生指出我的错误。