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

Question

我在单个 html 页面上有 2 个 table。

我只想删除其中一个的边框。

我目前拥有的 css 是...

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

这也与 table 相关联（我上面也有 bootstrap，我认为 table class 也与那个相关联？）

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

所以在 CSS 中，我只想制定一条规则，不对我页面上的 2 个 table 之一应用边框。但是我不知道该怎么做，因为它们使用相同的 table class，并且不确定我是否需要多个规则？我试过使用父级选择器和 ID 选择器，但可能会用错。感谢大家！

Answer 1

您可以将唯一的 class 或 ID 添加到您做想要在 CSS 中设置样式和目标的任何 table ].像这样：

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

.unique-name {
  // some styles.
}

这里 Fiddle 向您展示我在说什么。

请注意，分配给它的 class styled-table 的 table 有一些格式，而 class unstyled-table 的 table ] 没有格式。

Answer 2

一种方法是在要删除边框的 table 中添加另一个 class。

类似<table class="table noborder">的东西，然后将你想要的css应用到noborderclass。

Answer 3

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

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

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

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

Answer 4

Bootstrap class 边框 table 是 table-bordered。如果你不使用它，table.

上将没有边框

Apply a CSS rule to only one HTML table?