Question

我想覆盖为所有表定义的以下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;
}

Answer 1

我认为第一组属性不起作用的原因是因为display没有auto值，所以应该忽略该属性。在这种情况下，inline-table仍然会生效，并且由于width不适用于inline元素，因此该组属性不会执行任何操作。

第二组属性只会隐藏表格，因为这是display: none的用途。

请尝试将其重置为table：

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

修改： min-width默认为0，而不是auto

Answer 2

“none”不会按照您的假设执行。为了“清除”CSS属性，必须将其设置回默认值，该默认值由CSS标准定义。因此，您应该在您喜欢的参考文献中查找默认值。

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

Answer 3

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

试试这个。它会起作用。

Answer 4

表的默认display属性为display:table;。唯一有用的值是inline-table。所有其他display值对表格元素无效。

没有auto选项将其重置为默认值，但如果您使用的是Javascript，则可以将其设置为空字符串，这样就可以了。

width:auto;有效，但不是默认值。表的默认宽度为100%，而width:auto;将使元素仅占用所需的宽度。

min-width:auto;是不允许的。如果设置min-width，它必须有一个值，但将其设置为零可能与将其重置为默认值一样好。

Answer 5

好吧，display: none;根本不会显示表格，请尝试display: inline-block;，宽度和最小宽度声明保持为“自动”。

Answer 6

我最终使用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); 
    }
})

Answer 7

我发现还原最小宽度设置的最佳方法是：

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

unset在规范中，但是某些浏览器（IE 10）不尊重它，因此在大多数情况下，0是一个很好的备用。最小宽度：0；

覆盖并重置CSS样式：auto或none不起作用

7 个答案: