Remplacer et réinitialiser le style CSS: auto ou aucun ne fonctionne pas

Je voudrais remplacer le style CSS suivant défini pour toutes les tables:

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

J'ai une table spécifique avec une classe appelée 'other'.
Enfin, la décoration de table devrait ressembler à:

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

donc je besoin d' enlever 3 propriétés: width, min-widthetdisplay

J'ai essayé de réinitialiser avec noneou auto, mais je n'ai pas aidé, je veux dire ces cas:

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

Je crois que la raison pour laquelle le premier ensemble de propriétés ne fonctionnera pas est qu'il n'y a pas de autovaleur pour display, de sorte que la propriété doit être ignorée. Dans ce cas, inline-tableprendra toujours effet, et comme widthne s'applique pas aux inlineéléments, cet ensemble de propriétés ne fera rien.

Le deuxième ensemble de propriétés masquera simplement la table, car c'est à cela que display: nonesert.

Essayez de le réinitialiser à la tableplace:

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

Modifier: par min-width défaut 0, pasauto

"aucun" ne fait pas ce que vous supposez qu'il fait. Pour «effacer» une propriété CSS, vous devez la remettre à sa valeur par défaut, qui est définie par le standard CSS. Ainsi, vous devriez rechercher les valeurs par défaut dans votre référence préférée.

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

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

Essaye ça. Ça va marcher.

La displaypropriété par défaut d'une table est display:table;. La seule autre valeur utile est inline-table. Toutes les autres displayvaleurs ne sont pas valides pour les éléments de table.

Il n'y a pas d' autooption pour le réinitialiser par défaut, bien que si vous travaillez en Javascript, vous pouvez le définir sur une chaîne vide, ce qui fera l'affaire.

width:auto;est valide, mais n'est pas la valeur par défaut. La largeur par défaut d'un tableau est100% , alors que width:auto;cela fera que l'élément n'occupera que la largeur dont il a besoin.

min-width:auto;n'est pas autorisé. Si vous le définissez min-width, il doit avoir une valeur, mais le mettre à zéro est probablement aussi bon que de le réinitialiser par défaut.

Eh bien, display: none;n'affichera pas du tout le tableau, essayez display: inline-block;avec les déclarations de largeur et de largeur min restant «auto».

J'ai fini par utiliser Javascript pour tout perfectionner.

Mon violon 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); 
    }
})

Le meilleur moyen que j'ai trouvé pour rétablir un paramètre de largeur minimale est:

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

unset est dans la spécification, mais certains navigateurs (IE 10) ne le respectent pas, donc 0 est une bonne solution de secours dans la plupart des cas. largeur min: 0;