3

Estou fazendo uma refatoração em um código e tem um regra CSS que está mudando o display de todas tabelas. Uma tabela em específico está visualmente quebrada por conta dessa alteração. Como ainda não vi todo o código, temo que se eu sobrescrever esta regra possa quebrar outras estruturas que são dependentes dela. Existe algum seletor CSS que eu consiga dizer: "Pegue todas as tabelas exceto as com classe .tabela-isolada" ?

table, thead, tbody, th, td, tr { 
    display: block; 
}

3 Respostas 3

4

Você pode usar o pseudo-seletor :not assim:

:not(.tabela-isolada)

Como tem vários estilos, e quer excluir pela tabela, vai ficar um pouco extenso:

table:not(.tabela-isolada),
:not(.tabela-isolada) > thead,
:not(.tabela-isolada) > tbody,
:not(.tabela-isolada) > * > th,
:not(.tabela-isolada) > * > td,
:not(.tabela-isolada) > * > tr {
    display: block;
}

Referência na MDN - note pela MDN, que o suporte desse seletor não é amplo, principalmente se falando de IE

2
  • +1 Ficaria mais fácil visualizar se houvesse quebra de linha nas vírgulas :) 28/03/2014 às 18:41
  • @LeandroAmorim: também acho, editei a resposta. =D 28/03/2014 às 18:55
2

Acho que o que você quer seja isso:

table, thead, tbody, th, td, tr:not('.tabela-isolada') { 
    display: block; 
}

:not() é uma pseudo-class de negação.

Obs: Não é suportada por todos os browsers, como especificado no MDN

Referências:

2

Vamos por partes, esse código

table, thead, tbody, th, td, tr { 
    display: block; 
}

está colocando diplay block em todos esses elementos:

table
thead
tbody
th
td
tr

Usando o padrão do w3 para ter o efeito "original" da tabela você teria que fazer algo assim:

table.tabela-isolada { display: table !important; }
table.tabela-isolada tr { display: table-row !important; }
table.tabela-isolada thead { display: table-header-group !important; }
table.tabela-isolada tbody { display: table-row-group !important; }
table.tabela-isolada tfoot { display: table-footer-group !important; }
table.tabela-isolada col { display: table-column !important; }
table.tabela-isolada colgroup { display: table-column-group !important; }
table.tabela-isolada td,
table.tabela-isolada th { display: table-cell !important; }
table.tabela-isolada caption { display: table-caption !important; }

E para não ter problemas de sobrescrita de propriedade insira esse CSS posterior ao que coloca o display: block .

1
  • +1 pela solução que funciona em browsers antigos. 28/03/2014 às 18:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .