web-dev-qa-db-fra.com

Comment supprimer toute la mise en forme CSS héritée pour un tableau?

J'ai un tableau qui a un certain style en raison du fichier CSS de la page (il a des bordures bleues, etc ...).

Existe-t-il un moyen simple de supprimer le code CSS pour cette table spécifique? Je réfléchissais à quelque chose qui ressemble à une commande telle que:

style="nostyle"

Est-ce que quelque chose comme ça existe? 

cssinheritancecss-tables
24
chris

Essaye ça.

De Reset Eric de Eric Meyer

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

Utilisez une réinitialisation CSS telle que/ YUI CSS reset .

3
Jon Galloway

Je cherchais quelque chose comme ceci sur un site Web qui utilisait à la fois jqueryui et le tablesorter plugin , pour une table dans une table de table. Certaines des réponses fournies ici ont été utiles, mais cela n’a pas été suffisant, d’autant plus que tablesorter utilise: survol et jquery ui utilise les arrondis, etc. Voici ce que j’ai trouvé:

J'ai déclaré une classe qui, lorsqu'elle est appliquée à une table, la nettoie à certains défauts raisonnables. Il est impératif que ce css soit déclaré avant toute autre classe pour laquelle il pourrait avoir besoin de nettoyer, par exemple <link>, ou placez-le dans une balise <style> en haut de votre section <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;
}

Ensuite, appliquez simplement la classe à la table que vous voulez "par défaut":

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

Si vous voulez vous assurer de ne pas définir le CSS pour toutes les propriétés, vous pouvez utiliser les éléments suivants:

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

Documentation MDN sur la propriété all: https://developer.mozilla.org/en-US/docs/Web/CSS/all

0
Gregory Arenius