Comment faire pour supprimer tous les CSS hérité mise en forme pour une table?
-
13-09-2019 - |
Question
J'ai une table qui a un certain style en raison du fichier CSS pour la page (il a des frontières bleu, etc ...).
Y at-il un moyen simple de supprimer le CSS pour cette table spécifique? Je pensais quelque chose le long des lignes d'une commande comme:
style="nostyle"
Est-ce que quelque chose comme cela existe?
La solution
Essayez ceci.
De Réinitialiser CSS 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;
}
Autres conseils
Utilisez une réinitialisation CSS comme le YUI CSS reset .
Je cherchais quelque chose comme ça sur un site Web qui sert à la fois jQueryUI et plug-in tablesorter , pour une table à l'intérieur d'une table tablesorter. Bien que certaines des réponses ici ont aidé, il ne suffit pas, d'autant plus que tablesorter utilise: vol stationnaire et jquery ui utilise l'arrondi d'angle, etc. Voici ce que je suis venu avec:
Je déclarai une classe qui lorsqu'elle est appliquée à une table va nettoyer certains défauts sensibles. Il est impératif que ce soit déclaré avant css d'autres classes, il peut être nécessaire de nettoyer pour, par exemple <link>
pour ou le mettre 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, il suffit d'appliquer la classe à la table que vous voulez « en défaut »:
<table class="defaulttable and whatever else you want">
<tbody>
<tr>
<td>This will appear with sensible defaults.</td>
</tr>
</tbody>
</table>
Si vous voulez vous assurer que vous le CSS pour détruisez une toutes les propriétés que vous pouvez utiliser les éléments suivants:
table, caption, tbody, tfoot, thead, tr, th, td {
all: unset;
}
Documentation sur le MDN propriété all
: https: // développeur. mozilla.org/en-US/docs/Web/CSS/all