同じページで別のスタイルにテーブルを変更する方法

Question

このテーブルスタイルを別のものと同じページで使用したいのですが、常に他のものがこのテーブルスタイルをコントロールしていますので、別のスタイルに変更してください。 Jsfiddleの例で作成してください。

ここに私のCSS：ここ

body { 
    color: #555; 
    font-family: 'Open Sans'; 
} 

th { 
    text-align: left; 
} 
table { 
    background-color: transparent; 
    width: 100%; 
    max-width: 100%; 
    margin-bottom: 20px; 
    border-collapse: separate; 
    border-spacing: 0 7px; 
} 
table > thead > tr > th, 
table > tbody > tr > th, 
table > tfoot > tr > th, 
table > thead > tr > td, 
table > tbody > tr > td, 
table > tfoot > tr > td { 
    padding: 13px; 
    line-height: 20px; 
} 
table th { 
    font-weight: 700; 
    font-size: 13px; 
    color: #868686; 
    vertical-align: bottom; 
    padding: 0 13px !important; 
} 
table td { 
    vertical-align: middle; 
    background: #fff; 
    border: 1px solid #eaeaea; 
    border-right: 0; 
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); 
    transition: all .2s ease; 
    font-size: 13px; 
} 
table td:last-child { 
    border-right: 1px solid #eaeaea; 
    border-radius: 0 2px 2px 0; 
} 
table td:first-child { 
    border-radius: 2px 0 0 2px; 
} 
table > thead > tr > th { 
    vertical-align: bottom; 
} 
table > caption + thead > tr:first-child > th, 
table > colgroup + thead > tr:first-child > th, 
table > thead:first-child > tr:first-child > th, 
table > caption + thead > tr:first-child > td, 
table > colgroup + thead > tr:first-child > td, 
table > thead:first-child > tr:first-child > td { 
    border: 0; 
} 
table > tbody > tr:hover > td, 
table > tbody > tr:hover > th { 
    background-color: #f7f8fb; 
} 

私のHTML：

<table> 
    <thead> 
    <tr> 
     <th></th> 
     <th>Name</th> 
     <th>Email</th> 
     <th>Comment</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td width="20">1</td> 
     <td>Obcasyn Maruszczak</td> 
     <td>obcasyn@example.com</td> 
     <td>No comment</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Obcasyn Maruszczakowy</td> 
     <td>maruszczak@example.com</td> 
     <td>No comment</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Obcasyn Maruszczakowy</td> 
     <td>maruszczak@example.com</td> 
     <td>No comment</td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

は彼らに同じクラス（"tables"言う）と異なるID（たとえば"tableOne"と"tableTwo"）を得

が宣言table.tables{ }のような、そのクラスを使用するための共通のCSSです。異なるCSSの場合は、そのIDを使用します。

​​

ここでは、IDを使用して見出しに異なる色を付けるウォーキングスニペットを示します。完璧な仕事..it

body { 
 
    color: #555; 
 
    font-family: 'Open Sans'; 
 
} 
 

 
th { 
 
    text-align: left; 
 
} 
 
table.tables { 
 
    background-color: transparent; 
 
    width: 100%; 
 
    max-width: 100%; 
 
    margin-bottom: 20px; 
 
    border-collapse: separate; 
 
    border-spacing: 0 7px; 
 
} 
 
table.tables > thead > tr > th, 
 
table.tables > tbody > tr > th, 
 
table.tables > tfoot > tr > th, 
 
table.tables > thead > tr > td, 
 
table.tables > tbody > tr > td, 
 
table.tables > tfoot > tr > td { 
 
    padding: 13px; 
 
    line-height: 20px; 
 
} 
 
table.tables th { 
 
    font-weight: 700; 
 
    font-size: 13px; 
 
    color: #868686; 
 
    vertical-align: bottom; 
 
    padding: 0 13px !important; 
 
} 
 
table.tables td { 
 
    vertical-align: middle; 
 
    background: #fff; 
 
    border: 1px solid #eaeaea; 
 
    border-right: 0; 
 
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); 
 
    transition: all .2s ease; 
 
    font-size: 13px; 
 
} 
 
table.tables td:last-child { 
 
    border-right: 1px solid #eaeaea; 
 
    border-radius: 0 2px 2px 0; 
 
} 
 
table.tables td:first-child { 
 
    border-radius: 2px 0 0 2px; 
 
} 
 
table.tables > thead > tr > th { 
 
    vertical-align: bottom; 
 
} 
 
table.tables > caption + thead > tr:first-child > th, 
 
table.tables > colgroup + thead > tr:first-child > th, 
 
table.tables > thead:first-child > tr:first-child > th, 
 
table.tables > caption + thead > tr:first-child > td, 
 
table.tables > colgroup + thead > tr:first-child > td, 
 
table.tables > thead:first-child > tr:first-child > td { 
 
    border: 0; 
 
} 
 
table.tables > tbody > tr:hover > td, 
 
table.tables > tbody > tr:hover > th { 
 
    background-color: #f7f8fb; 
 
} 
 

 
table.tables#tableOne th { 
 
    color:green; 
 
} 
 
table.tables#tableTwo th { 
 
    color: red; 
 
}

<table class="tables" id="tableOne"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>Name</th> 
 
     <th>Email</th> 
 
     <th>Comment</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td width="20">1</td> 
 
     <td>Obcasyn Maruszczak</td> 
 
     <td>obcasyn@example.com</td> 
 
     <td>No comment</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="tables" id="tableTwo"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th>Name</th> 
 
     <th>Email</th> 
 
     <th>Comment</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td width="20">1</td> 
 
     <td>Obcasyn Maruszczak</td> 
 
     <td>obcasyn@example.com</td> 
 
     <td>No comment</td> 
 
    </tr> 
 
    </tbody> 
 
</table>