Переопределить и сбросить стиль CSS: авто или ничего не работают

Я хотел бы переопределить следующие стили CSS, определенные для всех таблиц:

table {
        font-size: 12px;
        width: 100%;
        min-width: 400px;
        display:inline-table;
    }

У меня есть конкретная таблица с классом 'other'.
В итоге украшение стола должно выглядеть так:

table.other {
    font-size: 12px;
}

поэтому я должен удалить 3 свойства: width, min-widthиdisplay

Пытался сбросить с помощью noneили auto, но не помогло, я имею ввиду такие случаи:

table.other {
    width: auto;
    min-width: auto;
    display:auto;
}
table.other {
    width: none;
    min-width: none;
    display:none;
}

Я считаю, что причина, по которой первый набор свойств не работает, заключается в том, что для него нет autoзначения display, поэтому это свойство следует игнорировать. В этом случае inline-tableони все равно будут действовать, и, поскольку widthони не применяются к inlineэлементам, этот набор свойств ничего не сделает.

Второй набор свойств просто скроет таблицу, так как это то display: none, для чего.

Попробуйте tableвместо этого сбросить его на :

table.other {
    width: auto;
    min-width: 0;
    display: table;
}

Изменить: по min-width умолчанию 0, а неauto

«none» не делает то, что вы предполагаете. Чтобы «очистить» свойство CSS, вы должны вернуть его к значению по умолчанию, которое определено стандартом CSS. Таким образом, вы должны найти значения по умолчанию в вашем любимом справочнике.

table.other {
    width: auto;
    min-width: 0;
    display:table;
}

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

Попробуй это. Это сработает.

Свойство по умолчанию displayдля таблицы - display:table;. Единственное другое полезное значение - это inline-table. Все остальные displayзначения недопустимы для элементов таблицы.

Нет autoвозможности сбросить его до значения по умолчанию, хотя, если вы работаете в Javascript, вы можете установить для него пустую строку, что поможет.

width:auto;действительно, но не по умолчанию. Ширина по умолчанию для таблицы равна 100%, тогда width:auto;как элемент будет занимать ровно столько ширины, сколько ему нужно.

min-width:auto;не разрешено. Если вы установили min-width, оно должно иметь значение, но установка его на ноль, вероятно, так же хороша, как сброс на значение по умолчанию.

Ну, display: none;таблица вообще не будет отображать, попробуйте display: inline-block;с объявлениями ширины и минимальной ширины, оставшимися 'auto'.

В итоге я использовал Javascript, чтобы все усовершенствовать.

Моя скрипка JS: 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); 
    }
})

Лучший способ, который я нашел, чтобы вернуть настройку минимальной ширины:

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

unset находится в спецификации, но некоторые браузеры (IE 10) не соблюдают его, поэтому 0 в большинстве случаев является хорошим запасным вариантом . минимальная ширина: 0;