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

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

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

ベストアンサー1

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

おすすめ記事