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

Question

Я хотел бы переопределить следующие стили 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;
}

Answer 1

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

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

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

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

Редактировать: min-width по умолчанию 0, а не auto

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

Я закончил с использованием 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); 
    }
})