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.
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.
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.
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'.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With