CSS selector for tables

Asked

Viewed 216 times

3

I’m doing a refactoring in a code and there’s a CSS rule that’s changing the display of all tables. A specific table is visually broken because of this change. Since I haven’t seen all the code, I’m afraid if I override this rule, I might break other structures that are dependent on it. Is there a CSS selector I can say: "Take all tables except with class .tabela-isolada" ?

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

3 answers

4


You can use the pseudo-selector :not thus:

:not(.tabela-isolada)

As it has several styles, and wants to delete by table, it will get 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;
}

Reference in the MDN - note by MDN that the support of this selector is not broad, especially if speaking of IE

  • +1 It would be easier to visualize if there were line breaks in commas :)

  • @Leandroamorim: I think so too, I edited the answer. = D

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 denial.

Note: Not supported by all browsers as specified in MDN

References:

2

Let’s go in pieces, that code 

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

is putting diplay block on all these elements:

table
thead
tbody
th
td
tr

Using the pattern of W3 to have the "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 avoid problems with property overwriting, enter this CSS later than you put the display: block .

  • +1 for the solution that works on old browsers.

Browser other questions tagged css css3

You are not signed in. Login or sign up in order to post.