重写和重置CSS样式:自动或不工作

I would like to override following CSS styling defined for all tables:

我想重写为所有表定义的CSS样式:

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

I have specific table with class called 'other'.
Finally table decoration should looks like:

我有一个叫做“other”的特定表格。最后，桌面装饰应如下:

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

so i need remove 3 properties: width,min-width and display

因此我需要删除3个属性:宽度、最小宽度和显示

I tried to reset with none or auto, but didn't help, I mean these cases:

我试着用“无”或“自动”来重置，但没有用，我的意思是:

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

6 个解决方案

#1

159

I believe the reason why the first set of properties will not work is because there is no auto value for display, so that property should be ignored. In that case, inline-table will still take effect, and as width do not apply to inline elements, that set of properties will not do anything.

我认为，第一个属性集合不能工作的原因是没有显示的自动值，因此应该忽略该属性。在这种情况下，inline-table仍然会生效，并且由于width不适用于内联元素，该属性集不会做任何事情。

The second set of properties will simply hide the table, as that's what display: none is for.

第二组属性将简单地隐藏表，因为显示的是:none。

Try resetting it to table instead:

试着将它重新设置为table:

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

Edit: min-width defaults to 0, not auto

编辑:最小宽度默认为0，不是自动

#2

"none" does not do what you assume it does. In order to "clear" a CSS property, you must set it back to its default, which is defined by the CSS standard. Thus you should look up the defaults in your favorite reference.

“none”不会做你认为它会做的事情。为了“清除”CSS属性，必须将其设置为默认值，这是由CSS标准定义的。因此，您应该在您最喜欢的引用中查找默认值。

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

#3

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

Try this. It will work.

试试这个。它将工作。

#4

The default display property for a table is display:table;. The only other useful value is inline-table. All other display values are invalid for table elements.

表的默认显示属性是display:table;另一个有用的值是内联表。表元素的所有其他显示值无效。

There isn't an auto option to reset it to default, although if you're working in Javascript, you can set it to an empty string, which will do the trick.

没有自动选项可以将其重置为默认值，不过如果使用Javascript，可以将其设置为一个空字符串，这样就可以了。

width:auto; is valid, but isn't the default. The default width for a table is 100%, whereas width:auto; will make the element only take up as much width as it needs to.

宽度:汽车;是有效的，但不是默认值。表的默认宽度为100%，而宽度为auto;将使元素只占用它需要的宽度。

min-width:auto; isn't allowed. If you set min-width, it must have a value, but setting it to zero is probably as good as resetting it to default.

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

#5

Well, display: none; will not display the table at all, try display: inline-block; with the width and min-width declarations remaining 'auto'.

嗯,显示:没有;将不会显示该表，请尝试显示:inline-block;宽度和最小宽度声明保持“自动”。

#6

I ended up using Javascript to perfect everything.

我最终使用Javascript来完善一切。

My JS fiddle: https://jsfiddle.net/QEpJH/612/

我的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); 
    }
})

#1

159