css - 如何在 CSS 中拥有不同的表格样式

Question

我的页面中有不同的表格，它们应该有不同的边框、cellpadding 等。我可以创建很多类，例如，

.pad5 td {padding:5px}

然后使用，

<table class="pad5">

但是如果我使用'table'是css，样式将应用于所有表格。我怎样才能达到这个结果？

Answer 1

您可以尝试为每个表添加一个 ID，然后在 css 中使用此 ID 进行引用，例如:

CSS 和 HTML:

#table1 tr td {
  padding: 5px;
  border: 4px solid #888;
}

#table2 tr td {
  padding: 5px;
  border: 4px solid red;
}

<table id="table1">
  <tr>
    <td>first content</td>
    <td>second content</td>
 </tr>
</table>

<table id="table2">
  <tr>
    <td>first content</td>
    <td>second content</td>
 </tr>
</table>