Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

People also ask

How do I override auto width in CSS?

The max-width property in CSS is used to set the maximum width of a specified element. The max-width property overrides the width property, but min-width will always override max-width whether followed before or after width in your declaration.

How do you override and remove CSS properties?

There are several ways to overwrite CSS properties from external libraries. Case 1: if you're using Bootstrap or Zurb Foundation via npm package, you need to change a variable value that is responsible for given property and place it after importing all library files to ovewrite correctyly eg.

How do I reset CSS to default?

No, it is generally not possible. Once some CSS (or HTML) code sets a value for a property on an element, there is no way to undo it and tell the browser to use its default value. It is of course possible to set a property a value that you expect to be the default value.

How do you unset all styles in CSS?

all:revert will RESET all the style properties on your element back to the original browser default UA style sheet property values, or whatever is styled in the parent body element.


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


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

Set min-width: inherit /* Reset the min-width */

Try this. It will work.


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.


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