tablas - ¿Cómo eliminar todo el formato CSS heredado de una tabla?
limpiar estilos css no utilizados (4)
Estaba buscando algo como esto en un sitio web que usaba jqueryui y el plugin tablesorter , para una mesa dentro de una mesa tablesorter. Si bien algunas de las respuestas aquí ayudaron, no fue suficiente, especialmente porque las tablas de clasificación usan: hover y jquery ui usa el redondeo de esquinas, etc. Esto es lo que se me ocurrió:
Declaré una clase que cuando se aplica a una tabla la limpiará a algunos valores predeterminados razonables. Es imperativo que este css se declare antes que cualquier otra clase para la que deba limpiar, es decir, <link> o colóquelo en una etiqueta <style> en la parte superior de su sección <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;
}
Luego simplemente aplique la clase a la tabla que desea "predeterminada":
<table class="defaulttable and whatever else you want">
<tbody>
<tr>
<td>This will appear with sensible defaults.</td>
</tr>
</tbody>
</table>
Tengo una tabla que tiene un cierto estilo debido al archivo CSS de la página (tiene bordes azules, etc.).
¿Hay una forma sencilla de eliminar el CSS para esa tabla específica? Estaba pensando en algo parecido a una orden como:
style="nostyle"
¿Existe algo como esto?
Prueba esto.
Desde el restablecimiento de CSS 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;
}
Si quieres asegurarte de que desactivas el CSS de todas las propiedades, puedes usar lo siguiente:
table, caption, tbody, tfoot, thead, tr, th, td {
all: unset;
}
Documentación de MDN en all propiedad: https://developer.mozilla.org/en-US/docs/Web/CSS/all
Utilice un restablecimiento de CSS como el restablecimiento de CSS YUI .