Substituir e redefinir o estilo CSS: automático ou nenhum não funciona

Gostaria de substituir o seguinte estilo CSS definido para todas as tabelas:

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

Eu tenho tabela específica com a classe chamada 'other'.
Finalmente, a decoração da mesa deve se parecer com:

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

Portanto preciso de remover 3 propriedades: width, min-widthedisplay

Tentei redefinir com noneou auto, mas não ajudou, quero dizer os seguintes casos:

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

Acredito que a razão pela qual o primeiro conjunto de propriedades não funcione é porque não há autovalor para display, portanto essa propriedade deve ser ignorada. Nesse caso, inline-tableainda terá efeito e, como widthnão se aplica aos inlineelementos, esse conjunto de propriedades não fará nada.

O segundo conjunto de propriedades simplesmente oculta a tabela, pois display: noneé para isso.

Tente redefini-lo para table:

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

Editar: o min-width padrão é 0, nãoauto

"none" não faz o que você supõe. Para "limpar" uma propriedade CSS, você deve restaurá-la ao seu padrão, definido pelo padrão CSS. Portanto, você deve procurar os padrões em sua referência favorita.

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

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

Tente isso. Vai funcionar.

A displaypropriedade padrão para uma tabela é display:table;. O único outro valor útil é inline-table. Todos os outros displayvalores são inválidos para os elementos da tabela.

Não há uma autoopção para redefini-la para o padrão, embora se você estiver trabalhando em Javascript, pode configurá-la para uma string vazia, o que fará o truque.

width:auto;é válido, mas não é o padrão. A largura padrão para uma tabela é 100%, ao passo width:auto;que o elemento ocupará apenas a largura necessária.

min-width:auto;não é permitido Se você definir min-width, ele deve ter um valor, mas defini-lo como zero é provavelmente tão bom quanto redefini-lo para o padrão.

Bem, display: none;não exibirá a tabela, tente display: inline-block;com as declarações de largura e largura mínima restantes 'auto'.

Acabei usando Javascript para aperfeiçoar tudo.

Meu violino 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); 
    }
})

A melhor maneira que eu encontrei para reverter uma configuração de largura mínima é:

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

unset está na especificação, mas alguns navegadores (IE 10) não o respeitam, portanto, 0 é um bom substituto na maioria dos casos. largura mínima: 0;