Переопределить и reset стиль 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

Я попытался reset с none или auto, но не помог, я имею в виду следующие случаи:

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

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Ответ 3

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

Попробуйте это. Он будет работать.

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

Лучший способ найти минимальную ширину:

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

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