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;像这样：

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

这是一个wokring片段，我用它们的ID给出了不同颜色的标题。

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>

如何在同一页面将表格更改为不同的样式

1 个答案: