CSS selector for tables

3

I am doing a refactoring in a code and have a CSS rule that is changing the display of all tables. A specific table is visually broken because of this change. Since I have not yet seen the whole code, I fear that if I override this rule it might break other structures that are dependent on it. Is there any CSS selector I can say: "Get all tables except those with class .tabela-isolada " ?

table, thead, tbody, th, td, tr { 
    display: block; 
}
    
asked by anonymous 28.03.2014 / 15:20

3 answers

4

You can use the pseudo-selector :not like this:

:not(.tabela-isolada)

As you have several styles, and want to delete by the table, it will be a little extensive:

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;
}

MDN Reference - note from MDN that the support for this selector does not is broad, especially if speaking of IE

    
28.03.2014 / 15:27
2

I think what you want is this:

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

:not() is a pseudo-class of deny.

  

Note: Not supported by all browsers, as specified in MDN

References:

28.03.2014 / 15:27
2

Let's break this code down

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

You are putting a diplay block on all these elements:

  

table
thead
tbody
th

Using the w3 "original" effect of the table you would have to do something like this:

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; }

And to have no property overrun problems insert that CSS later than the td .

    
28.03.2014 / 19:25