¿Cómo eliminar a todos los CSS heredado el formato de una tabla?

StackOverflow https://stackoverflow.com/questions/968895

  •  13-09-2019
  •  | 
  •  

Pregunta

Tengo una tabla que tiene un cierto estilo debido al archivo CSS de la página (que tiene bordes azules, etc ...).

¿Hay una manera sencilla de eliminar el CSS para que la tabla específica? Estaba pensando en algo en la línea de un comando como: 

style="nostyle"

¿Existe algo como esto?

¿Fue útil?

Solución

Probar.

de Eric Meyer CSS reset 

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

Otros consejos

Utilice un restablecimiento CSS como el YUI CSS restablecer .

Estaba buscando algo como esto en un sitio web que utiliza tanto jqueryui y la tablesorter complemento , para una tabla dentro de una tabla tablesorter. Mientras que algunas de las respuestas aquí ayudó, no fue suficiente, sobre todo porque tablesorter utiliza: estacionario y jquery ui utiliza el redondeo de la esquina, etc. Esto es lo que ocurrió:

declaré una clase que cuando se aplica a una mesa lo limpiará hasta unos valores iniciales adecuados. Es imperativo que esta css se declara antes de cualquier otra clase que tenga que limpiar para, es decir <link> a él o ponerlo en una etiqueta <style> en la parte superior de la sección de <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;
}

A continuación, basta con aplicar la clase a la tabla que desea "default": 

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

Si desea asegurarse de borra una CSS para todas las propiedades que puede utilizar lo siguiente: 

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

MDN Documentación sobre la propiedad all: https: // desarrollador. mozilla.org/en-US/docs/Web/CSS/all

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top