web-dev-qa-db-ja.com

CSSスタイルのオーバーライドとリセット：autoまたはnoneは機能しません

すべてのテーブルに定義されている次の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;
}
csswidthoverriding
117
sergionni

最初のプロパティセットが機能しない理由は、 auto にdisplay値がないため、そのプロパティを無視する必要があるためだと思います。その場合、inline-tableは引き続き有効であり、widthはinline要素には適用されないため、そのプロパティセットは何も実行しません。

2番目のプロパティセットは、display: noneが目的であるため、単にテーブルを非表示にします。

代わりにtableにリセットしてみてください。

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

編集：min-width デフォルトはautoではなく0になります

173
Yi Jiang

「none」は、想定どおりに動作しません。 CSSプロパティを「クリア」するには、CSS標準で定義されているデフォルトに戻す必要があります。したがって、お気に入りの参照でデフォルトを検索する必要があります。

table.other {
    width: auto;
    min-width: 0;
    display:table;
}
17
tenfour
Set min-width: inherit /* Reset the min-width */

これを試して。それが動作します。

9
Martin

テーブルのデフォルトのdisplayプロパティはdisplay:table;です。他の有用な値はinline-tableのみです。他のすべてのdisplay値は、テーブル要素に対して無効です。

デフォルトにリセットするautoオプションはありませんが、Javascriptで作業している場合は、空の文字列に設定してトリックを実行できます。

width:auto;は有効ですが、デフォルトではありません。テーブルのデフォルトの幅は100%ですが、width:auto;は要素が必要なだけの幅を占めるようにします。

min-width:auto;は許可されていません。 min-widthを設定する場合、値を設定する必要がありますが、ゼロに設定することは、おそらくデフォルトにリセットするのと同じくらい良いでしょう。

7
Spudley

さて、display: none;はテーブルをまったく表示しません。幅と最小幅の宣言を 'auto'のままにしてdisplay: inline-block;を試してください。

1
Steven

最小幅の設定を元に戻す最良の方法は次のとおりです。

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

unsetは仕様にありますが、一部のブラウザー（IE 10）はそれを尊重しないため、0はmostの場合の適切なフォールバックです。最小幅：0;

0
A Morales

私はすべてを完璧にするために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); 
    }
})
0
User