如何删除表格的所有继承的 CSS 格式？答案

【问题标题】：How to remove all inherited CSS formatting for a table?如何删除表格的所有继承的 CSS 格式？
【发布时间】：2009-06-09 08:41:11
【问题描述】：

由于页面的 CSS 文件（它有蓝色边框等），我有一个具有特定样式的表格。

有没有一种简单的方法来删除该特定表格的 CSS？我在想一些类似命令的东西：

style="nostyle"

这样的事情存在吗？

【问题讨论】：

标签： css inheritance css-tables

【解决方案1】：

试试这个。

来自Eric Meyer's Reset CSS

table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

【讨论】：

当然，如果您想在页面的其余部分保留 css，请使用 id 或封装一些容器元素 #myTable table, caption, tbody, ... 或 .mySpanId table, caption, tbody, ...
您还需要添加width: auto; height: auto

【解决方案2】：

使用 YUI CSS reset 之类的 CSS 重置。

【讨论】：

JQuery 有类似的吗？
@RichardOD：YUI CSS 重置不需要任何 javascript。它是纯 CSS 的。所以它适用于 jQuery。
@Kristof 哦，是的-我一开始没有注意到。我只是假设 YUI 是 JavaScript。谢谢

【解决方案3】：

如果您想确保取消设置所有属性的 CSS，您可以使用以下内容：

table, caption, tbody, tfoot, thead, tr, th, td {
    all: unset;
}

关于 all 属性的 MDN 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/all

【讨论】：

【解决方案4】：

正在使用jqueryui 和tablesorter plugin 的网站上寻找类似的东西，用于tablesorter 表中的表。虽然这里的一些答案有所帮助，但这还不够，特别是因为 tablesorter 使用 :hover 和 jquery ui 使用圆角等。这是我想出的：

我声明了一个类，当应用于表时会将其清理为一些合理的默认值。必须在可能需要清理的任何其他类之前声明此 css，即 <link> 或将其放在 <head> 部分顶部的 <style> 标记中。

.defaulttable {
  display: table;
}
.defaulttable thead {
  display: table-header-group;
}
.defaulttable tbody {
  display: table-row-group;
}
.defaulttable tfoot {
  display: table-footer-group;
}
.defaulttable tbody>tr:hover,
.defaulttable tbody>tr {
  display: table-row;
}
.defaulttable tbody>tr:hover>td,
.defaulttable tbody>tr>td {
  display: table-cell;
}
.defaulttable,
.defaulttable tbody,
.defaulttable tbody>tr:hover,
.defaulttable tbody>tr,
.defaulttable tbody>tr:hover>td,
.defaulttable tbody>tr>td,
.defaulttable tbody>tr:hover>th,
.defaulttable tbody>tr>th,
.defaulttable thead>tr:hover>td,
.defaulttable thead>tr>td,
.defaulttable thead>tr:hover>th,
.defaulttable thead>tr>th,
.defaulttable tfoot>tr:hover>td,
.defaulttable tfoot>tr>td,
.defaulttable tfoot>tr:hover>th,
.defaulttable tfoot>tr>th {
  background: transparent;
  border: 0px solid #000;
  border-spacing: 0px;
  border-collapse: separate;
  empty-cells: show;
  padding: 0px;
  margin: 0px;
  outline: 0px;
  font-size: 100%;
  color: #000;
  vertical-align: top;
  text-align: left;
  font-family: sans-serif;
  table-layout: auto;
  caption-side: top;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}

然后简单地将类应用到你想要“默认”的表：

<table class="defaulttable and whatever else you want">
  <tbody>
    <tr>
      <td>This will appear with sensible defaults.</td>
    </tr>
  </tbody>
</table>

【讨论】：