覆盖并重置 CSS 样式：自动或无不起作用

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，因此应忽略该属性。在这种情况下，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; 并将宽度和最小宽度声明保留为“auto”。

Answer 6

我发现恢复最小宽度设置的最佳方法是：

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

未设置在规范中，但某些浏览器（IE 10）不尊重它，因此 0 在大多数中是一个很好的后备案例。
最小宽度：0；

Answer 7

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

我尝试过：

width:0%

为我工作