Anular y restablecer el estilo CSS: automático o ninguno no funciona

Me gustaría anular el siguiente estilo CSS definido para todas las tablas:

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

Tengo una tabla específica con la clase llamada 'other'.
Finalmente la decoración de la mesa debería verse así:

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

Así que necesito quito 3 propiedades: width, min-widthydisplay

Traté de restablecer con noneo auto, pero no ayudó, me refiero a estos casos:

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

Creo que la razón por la que el primer conjunto de propiedades no funcionará es porque no hay ningún autovalor para display, por lo que esa propiedad debe ignorarse. En ese caso, inline-tabletodavía tendrá efecto, y como widthno se aplica a los inlineelementos, ese conjunto de propiedades no hará nada.

El segundo conjunto de propiedades simplemente ocultará la tabla, ya que para eso display: noneestá.

Intenta restablecerlo en su tablelugar:

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

Editar: por min-width defecto 0, noauto

"ninguno" no hace lo que usted supone que hace. Para "borrar" una propiedad CSS, debe volver a establecerla en su valor predeterminado, que está definido por el estándar CSS. Por lo tanto, debe buscar los valores predeterminados en su referencia favorita.

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

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

Prueba esto. Funcionará.

La displaypropiedad predeterminada para una tabla es display:table;. El único otro valor útil es inline-table. Todos los demás displayvalores no son válidos para los elementos de la tabla.

No hay una autoopción para restablecerlo a los valores predeterminados, aunque si está trabajando en Javascript, puede configurarlo en una cadena vacía, lo que hará el truco.

width:auto;es válido, pero no es el predeterminado. El ancho predeterminado para una tabla es 100%, mientras width:auto;que el elemento solo ocupará todo el ancho que sea necesario.

min-width:auto;no está permitido Si lo configura min-width, debe tener un valor, pero establecerlo en cero probablemente sea tan bueno como restablecerlo a sus valores predeterminados.

Bueno, display: none;no mostrará la tabla en absoluto, intente display: inline-block;con las declaraciones de ancho y ancho mínimo restantes 'auto'.

Terminé usando Javascript para perfeccionar todo.

Mi violín 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); 
    }
})

La mejor manera que he encontrado para revertir una configuración de ancho mínimo es:

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

unset está en la especificación, pero algunos navegadores (IE 10) no lo respetan, por lo que 0 es una buena alternativa en la mayoría de los casos. ancho min: 0;