How to remove all inherited CSS formatting for a table?

后端未结

关注

 4  674

感情败类

I have a table which has a certain style due to the CSS file for the page (it has blue borders, etc...).

Is there a simple way to remove the CSS for that specific ta

相关标签:

4条回答

北海茫月

2020-12-13 14:37

Use a CSS reset like the YUI CSS reset.

0 讨论(0)
发布评论:

提交评论
- 加载中...

星月不相逢

2020-12-13 14:53

Try this.

From 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;
}

0 讨论(0)

情书的邮戳

2020-12-13 14:58
If you want to make sure you unset the CSS for all properties you can use the following:
```
table, caption, tbody, tfoot, thead, tr, th, td {
    all: unset;
}
```
MDN Documentation on the all property: https://developer.mozilla.org/en-US/docs/Web/CSS/all
0 讨论(0)
发布评论:

提交评论
- 加载中...

北荒

2020-12-13 15:02

Was looking for something like this on a website that used both jqueryui and 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:

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.

.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>

0 讨论(0)