Question

我正在尝试使用不同的CSS样式设置同一页面上的两个表的格式，但是，有继承关系我无法阻止它。

例如，如果我更改字体的颜色或大小，则会在两个表上都将其更改。

我尝试通过给CSS提供唯一的类来隔离表。

table.table1 

table.table2

或

.table1

.table2

在两种情况下，

都没有帮助单独隔离CSS。

这是我遇到的问题的一个示例：

http://jsfiddle.net/amlife180/e3xr7Lqb/6/

Answer 1

当您认为将类应用于特定表时，便将类应用于所有表单元格。

例如

table.table2 th, td {
    text-align: left;
    padding: 10px;
    font-family: arial;
    font-size: 15px;
    color: green !important ;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

这是将样式应用于table.table2并且还应用于所有td元素。逗号表示将样式应用于这两种样式。

您需要将其更改为

table.table2 th, table.table2 td {
    text-align: left;
    padding: 10px;
    font-family: arial;
    font-size: 15px;
    color: green !important ;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

以获得所需的效果。对

也做同样的事情

table.table1  th, table.table1  td {
    text-align: left;
    padding: 15px;
    font-family: arial;
    font-size: 14px;
    color: black !important;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

Answer 2

好吧，如果您将其更改为以下内容，我认为它可以工作。只需将tr和th分开即可。

table.table1 {
    border:none !important;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

table.table1  thead {

     border-bottom: 1px solid #000000;

}

table.table1  th {
    text-align: left;
    padding: 15px;
    font-family: arial;
    font-size: 14px;
    color: black !important;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}


table.table1   td {
    text-align: left;
    padding: 15px;
    font-family: arial;
    font-size: 14px;
    color: black !important;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}

table.table1  tr:nth-child(even) {
    background-color: #d1d8e0
}





table.table2 {
    border:none !important;
    border-collapse: collapse;
    border-spacing: 0;

}

table.table2 th{
    text-align: left;
    padding: 10px;
    font-family: arial;
    font-size: 15px;
    color: green !important ;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;

}

table.table2 td {
    text-align: left;
    padding: 10px;
    font-family: arial;
    font-size: 15px;
    color: green !important ;
    font-weight: normal;
    font-style: normal;
    text-decoration: none;

}

格式化同一页面上多个表的CSS样式

2 个答案: