将CSS规则仅应用于一个HTML表格？

Question

我在一个html页面上有2个表。

我想删除其中一个边框。

我目前的css是......

.table th, .table td {
     border-top: none !important;
 }

这也是与表相关联的（我也有引导程序，我认为表类也与之相关联？）

<table class="table">
<tbody>
    <tr>
        <th>1</th>
    </tr>
    <tr>
        <td>1</td>
    </tr> etc.....

所以在CSS中，我只想制定一个规则，不对我页面上的两个表中只有一个应用边框。但是我无法弄清楚如何使用它，因为它们使用相同的表类，并且不确定我是否需要多个规则？我尝试过使用父选择器和ID选择器，但可能会错误地调用它们。感谢大家！

Answer 1

您可以在 想要设置样式的表中添加一个唯一的类或ID，并在CSS中定位该选择器。像这样：

HTML

<table class="table unique-name">
  ...whatever contents
</table>

CSS

.unique-name {
  // some styles.
}

更新

这是一个Fiddle来向您展示我在说什么。

请注意，分配了类styled-table的表格具有一些格式，而类unstyled-table的表格没有格式。

Answer 2

一种方法是将另一个类添加到要删除边框的表中。

类似于<table class="table noborder">，然后将您想要的任何css应用于noborder类。

Answer 3

正确的方法是在表格上设置样式，然后相应地修改表格。这将是一个例子：

.table--bordered {
  border: 1px solid #666;
}

<table class="table">
  // No Borders
</table>

<table class="table table--bordered">
  // With Borders
</table>

Answer 4

有边界表的Bootstrap类为table-bordered。如果你不使用它，桌子上就没有边框了。