CODEWITHSUNDEEP
htmlcss
Linesofcode
Linesofcode

Reputation: 5923

Applying a class to a table not working as expected

I'm not a CSS expert but I believe my code should work (?).

I can make my code work without applying any class, but sometimes I need to restrict some tables from inherit a class.

JSFiddle working without applying a class in the <table>.

JSFiddle not working while applying a class in the <table>.

enter image description here

enter image description here

Upvotes: 1

Views: 58

Answers (3)

Vucko
Vucko

Reputation: 20844

As @panther already said, you have a bed selector.

However, if you want to use that style for the table that has only .responsiveTable class, then you'll have to use this selector:

.responsiveTable,
.responsiveTable thead,
.responsiveTable tbody,
.responsiveTable tfoot,
.responsiveTable th,
.responsiveTable td,
.responsiveTable tr {
    display: block
}

Which looks quite nesty. So I'd recommend you use a CSS preprocessor, like SASS where the selector would look like:

.responsiveTable{
    thead, tbody, tfoot, th, td, tr{
        display: block
    }
}

Which would generate the above selector.

Upvotes: 2

Alexis Peters
Alexis Peters

Reputation: 1631

in the not working one you forgot the commas int the css:

 .responsiveTable,table,thead,tbody,tfoot,th,td,tr {
        display: block
    }

Upvotes: 1

pavel
pavel

Reputation: 27092

On the 3rd line there is bad selector. The correct one is

.responsiveTable, thead, tbody, tfoot, th, td, tr

Your didin't work because commas missing and .responsiveTable table doesn't exist. Just table.responsiveTable.

Upvotes: 1

Related Questions