Como remover todos herdados CSS formatação de uma tabela?
-
13-09-2019 - |
Pergunta
Eu tenho uma tabela que tem um certo estilo devido ao arquivo CSS para a página (que tem fronteiras azuis, etc ...).
Existe uma maneira simples para remover o CSS para essa tabela específica? Eu estava pensando algo ao longo das linhas de um comando como:
style="nostyle"
faz qualquer coisa como isto existe?
Solução
Tente isto.
De Reset 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;
}
Outras dicas
Use uma redefinição de CSS como o YUI CSS reset .
Estava à procura de algo como isto em um site que usado tanto jqueryui e tablesorter plug-in , para uma mesa dentro de uma tabela tablesorter. Embora algumas das respostas aqui ajudou, não foi o suficiente, especialmente desde usos Tablesorter: hover e jQuery UI usa o arredondamento canto, etc. Aqui está o que eu vim com:
I declarou uma classe que, quando aplicado a uma tabela vai limpá-lo com alguns padrões sensíveis. imperativo de que este css é declarado antes de quaisquer outras classes que podem precisar de limpar-se de, ou seja <link>
a ele ou colocá-lo em uma tag <style>
no topo de sua seção <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;
}
Em seguida, basta aplicar a classe para a tabela que você deseja "incumprimento":
<table class="defaulttable and whatever else you want">
<tbody>
<tr>
<td>This will appear with sensible defaults.</td>
</tr>
</tbody>
</table>
Se você quiser ter certeza de retirar a CSS para todas as propriedades que você pode usar o seguinte:
table, caption, tbody, tfoot, thead, tr, th, td {
all: unset;
}
Documentação MDN na propriedade all
: https: // developer. mozilla.org/en-US/docs/Web/CSS/all