145

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

8 Answers 8

211

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

5
  • strange, I'm looking with firebug - min-width wasn't overriden by auto
    – sergionni
    Feb 23, 2011 at 13:22
  • 7
    @sergionni Oh yes, I forgot - min-width has a default value of 0 - reference.sitepoint.com/css/min-width
    – Yi Jiang
    Feb 23, 2011 at 13:23
  • i've looked again to firebug, there is also problem,that ther're have nested tables, so overriding should be applied to all hierarchy
    – sergionni
    Feb 23, 2011 at 13:28
  • 1
    @sergionni You can do that by adding table.other table to the selector used for the resetting properties
    – Yi Jiang
    Feb 23, 2011 at 13:30
  • 2
    width: auto when all I wanted to override was width: 100% -- Thank you
    – Meredith
    Sep 24, 2018 at 4:14
23

"none" does not do what you assume it does. In order to "clear" a CSS property, you must set it back to its default, which is defined by the CSS standard. Thus you should look up the defaults in your favorite reference.

table.other {
    width: auto;
    min-width: 0;
    display:table;
}
12
Set min-width: inherit /* Reset the min-width */

Try this. It will work.

2
  • 2
    This should be an accepted answer. min-width: 0 doesn't do the same thing
    – v010dya
    Aug 13, 2017 at 16:08
  • 1
    Right, but what if a parent has a min-width? you're going to get that instead of a real default.
    – adi518
    Feb 18, 2018 at 15:49
7

The default display property for a table is display:table;. The only other useful value is inline-table. All other display values are invalid for table elements.

There isn't an auto option to reset it to default, although if you're working in Javascript, you can set it to an empty string, which will do the trick.

width:auto; is valid, but isn't the default. The default width for a table is 100%, whereas width:auto; will make the element only take up as much width as it needs to.

min-width:auto; isn't allowed. If you set min-width, it must have a value, but setting it to zero is probably as good as resetting it to default.

1
  • interesting idea about JS. looks like what i need.And I will try with CSS first.
    – sergionni
    Feb 23, 2011 at 13:32
1

Well, display: none; will not display the table at all, try display: inline-block; with the width and min-width declarations remaining 'auto'.

1

The best way that I've found to revert a min-width setting is:

min-width: 0;
min-width: unset;

unset is in the spec, but some browsers (IE 10) do not respect it, so 0 is a good fallback in most cases. min-width: 0;

0

I ended up using Javascript to perfect everything.

My JS fiddle: https://jsfiddle.net/QEpJH/612/

HTML:

<div class="container">
    <img src="http://placekitten.com/240/300">
</div>

<h3 style="clear: both;">Full Size Image - For Reference</h3>
<img src="http://placekitten.com/240/300">

CSS:

.container {
    background-color:#000;
    width:100px;
    height:200px;

    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

}

JS:

$(".container").each(function(){
    var divH = $(this).height()
    var divW = $(this).width()
    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < (divW/divH)) { 
        $(this).addClass("1");
        var newW = $(this).width();
        var newH = (newW/imgW) * imgH;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    } else {
        $(this).addClass("2");
        var newH = $(this).height();
        var newW = (newH/imgH) * imgW;
        $(this).children("img").width(newW); 
        $(this).children("img").height(newH); 
    }
})
0

I have tried:

width:0%

Worked for me

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.