CODEWITHSUNDEEP
htmlcsshtml-table
k76
k76

Reputation: 9

How to change table to different style at same page

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>[email protected]</td>
      <td>No comment</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Obcasyn Maruszczakowy</td>
      <td>[email protected]</td>
      <td>No comment</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Obcasyn Maruszczakowy</td>
      <td>[email protected]</td>
      <td>No comment</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Views: 623

Answers (1)

ab29007
ab29007

Reputation: 7766

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>[email protected]</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>[email protected]</td>
      <td>No comment</td>
    </tr>
  </tbody>
</table>

Upvotes: 2

Related Questions