如何删除表格的所有继承的 CSS 格式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/968895/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove all inherited CSS formatting for a table?
提问by chris
I have a table which has a certain style due to the CSS file for the page (it has blue borders, etc...).
由于页面的 CSS 文件（它有蓝色边框等），我有一个具有特定样式的表格。
Is there a simple way to remove the CSS for that specific table? I was thinking something along the lines of a command like:
有没有一种简单的方法可以删除该特定表的 CSS？我在想一些类似的命令：
style="nostyle"
Does anything like this exist?
这样的东西存在吗？
回答by Kristof Neirynck
Try this.
尝试这个。
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
回答by Jon Galloway
Use a CSS reset like the YUI CSS reset.
回答by redreinard
Was looking for something like this on a website that used both jqueryuiand the tablesorter plugin, for a table inside a tablesorter table. While some of the answers here helped, it wasn't enough, especially since tablesorter uses :hover and jquery ui uses corner rounding, etc. Here is what I came up with:
在使用jqueryui和tablesorter 插件的网站上寻找类似的东西，用于tablesorter 表中的表。虽然这里的一些答案有所帮助，但这还不够，特别是因为 tablesorter 使用 :hover 和 jquery ui 使用圆角等。这是我想出的：
I declared a class that when applied to a table will clean it up to some sensible defaults. It's imperative that this css is declared before any other classes it may need to clean up for, ie <link>to it or put it in a <style>tag at the top of your <head>section.
我声明了一个类，当应用于表时，会将其清理为一些合理的默认值。这个 css 必须在它可能需要清理的任何其他类之前声明，即<link>，将其<style>添加到您的<head>部分顶部的标签中。
.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;
}Then simply apply the class to the table you want "defaulted":
然后只需将该类应用于您想要“默认”的表：
<table class="defaulttable and whatever else you want">
<tbody>
<tr>
<td>This will appear with sensible defaults.</td>
</tr>
</tbody>
</table>
回答by Gregory Arenius
If you want to make sure you unset the CSS for all properties you can use the following:
如果要确保取消所有属性的 CSS 设置，可以使用以下命令：
table, caption, tbody, tfoot, thead, tr, th, td {
all: unset;
}
MDN Documentation on the allproperty: https://developer.mozilla.org/en-US/docs/Web/CSS/all
关于该all属性的MDN 文档：https: //developer.mozilla.org/en-US/docs/Web/CSS/all
