Override and reset CSS style auto or none don t work

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

User · Answer

Set min-width  inherit    Reset the min-width      Try this  It will work

User · Answer

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

User · Answer

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

User · Answer

I ended up using Javascript to perfect everything   My JS fiddle  https   jsfiddle net QEpJH 612   HTML    lt div class  container  gt       lt img src  http   placekitten com 240 300  gt   lt  div gt    lt h3 style  clear  both   gt Full Size Image - For Reference lt  h3 gt   lt img src  http   placekitten com 240 300  gt    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   lt   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

User · Answer

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

User · 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

User · Answer

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

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

Examples related to css

Examples related to width

Examples related to overriding