覆盖并重置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;将width和min-width声明保留为“ auto”。

我最终使用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；