web-dev-qa-db-fra.com

Remplacer et réinitialiser le style CSS: auto ou none 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 classe appelée 'other'.
Enfin, la décoration de la table devrait ressembler à:

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

donc j'ai besoin de supprimer 3 propriétés: width, min-width et display

J'ai essayé de réinitialiser avec none ou auto, mais je n'ai pas aidé. Je parle des cas suivants:

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

Je crois que la première raison pour laquelle le premier ensemble de propriétés ne fonctionnera pas est qu’il n’ya pas de valeur auto pour display , de sorte que cette propriété doit être ignorée. Dans ce cas, inline-table prendra toujours effet et, étant donné que width ne s'applique pas aux éléments inline, cet ensemble de propriétés ne fera rien. 

Le second ensemble de propriétés cachera simplement la table, comme c'est le cas pour display: none. 

Essayez de le réinitialiser à table à la place: 

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

Edit:min-width La valeur par défaut est 0, pas auto

170
Yi Jiang

"none" ne fait pas ce que vous supposez qu'il fait. Pour "effacer" une propriété CSS, vous devez rétablir sa valeur par défaut, 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;
}
17
tenfour
Set min-width: inherit /* Reset the min-width */

Essaye ça. Ça va marcher.

9
Martin

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

Il n'y a pas d'option auto pour le rétablir 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'une table est 100%, alors que width:auto; fera en sorte que l'élément ne prenne que la largeur nécessaire.

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

7
Spudley

Eh bien, display: none; n’affiche pas la table du tout, essayez display: inline-block; avec les déclarations width et min-width restantes 'auto'.

1
Steven

La meilleure façon que j'ai trouvée de rétablir un paramètre min-width est la suivante:

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

unset est dans la spécification, mais certains navigateurs (IE 10) ne la respectent pas, donc 0 est une bonne solution de repli dans la plupart cases . min-width: 0;

0
A Morales

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); 
    }
})
0
User