Перезазначення та скидання стилю 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

"ніхто" не робить те, що ви вважаєте, що це робить. Щоб "очистити" властивість 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;з оголошеннями про ширину та мінімальну ширину, що залишаються "авто".

Я в кінцевому підсумку використовував 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;