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

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

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

请帮助。

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

来源

2013-07-27 Kartic

的选择

table.CommonTableStyle1 table, th, td

不能正常工作，因为在带班 “CommonTableStyle1” 表中没有表。

我想你的意思是这样：

table.CommonTableStyle1 th, table.CommonTableStyle1 td

见fiddle

此外，最下面的选择做了工作，但不是在你可能会思考的方式。 th, td部分与上面的部分具有相同的特征，因此所有th s和td s都将采用此方式，因为此方式稍后。但是现在可以，因为我们已经使上面那个的特异性更大了。

来源

2013-07-27 11:37:32

嗨李斯特先生，你的答案为我工作。但是，如果我按照我的问题所示更改代码，则会发生同样的情况。你能帮我解决这个问题吗？ – Kartic

已编辑的CSS部分中的代码工作。感谢李斯特先生指出我的错误。 – Kartic

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

回答

相关问题