How to change table to different style at same page - html

Question

I want to use this table style at same page with another one, but always other one control this one, so please can you change this for me to become different style. Please would you mind to make it with a Jsfiddle example.
Here my 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;
}
Here my 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

Give them the same class (say "tables") and different ids (say "tableOne" and "tableTwo")
Declare the common css for them using their class, like table.tables{ }. For different css use their ids; like this :
table.tables#tableOne th {
color:green;
}
table.tables#tableTwo th {
color: red;
}
Here's a wokring snippet in which I give their headings different colors using their ids.
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>