sergionni sergionni - 2 months ago 10
CSS Question

Override and reset CSS style: auto or none don't work

I would like to override following CSS styling defined for all tables:

table {
font-size: 12px;
width: 100%;
min-width: 400px;
display:inline-table;
}


I have specific table with class called
'other'
.

Finally table decoration should looks like:

table.other {
font-size: 12px;
}


so i need remove 3 properties:
width
,
min-width
and
display


I tried to reset with
none
or
auto
, but didn't help, I mean these cases:

table.other {
width: auto;
min-width: auto;
display:auto;
}
table.other {
width: none;
min-width: none;
display:none;
}

Answer

I believe the reason why the first set of properties will not work is because there is no auto value for display, so that property should be ignored. In that case, inline-table will still take effect, and as width do not apply to inline elements, that set of properties will not do anything.

The second set of properties will simply hide the table, as that's what display: none is for.

Try resetting it to table instead:

table.other {
    width: auto;
    min-width: 0;
    display: table;
}

Edit: min-width defaults to 0, not auto

Comments