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


130

すべてのテーブルに定義されている次のCSSスタイルをオーバーライドしたいと思います。

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

というクラスの特定のテーブルがあります'other'
最後に、テーブルの装飾は次のようになります。

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

私は3つのプロパティを削除する必要が:widthmin-widthおよびdisplay

noneまたはautoでリセットしようとしましたが、助けにはなりませんでした。

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

回答:


195

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

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

table代わりにそれをリセットしてみてください:

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

編集: min-widthデフォルトで0はなく、auto


奇妙なことに、私は
firebugで

6
ああ@sergionni、私は忘れてしまった- min-widthのデフォルト値がある0- reference.sitepoint.com/css/min-width
李江

私はもう一度Firebugを調べましたが、問題もあり、そこにはネストされたテーブルがあるため、すべての階層にオーバーライドを適用する必要があります
sergionni

1
@sergionniこれtable.other tableは、プロパティのリセットに使用されるセレクターに追加することで実行できます
Yi Jiang

1
width: autoオーバーライドしたいのはwidth: 100%-ありがとう
Meredith

18

"none"は、ユーザーが想定していることを実行しません。CSSプロパティを「クリア」するには、CSS標準で定義されているデフォルトに戻す必要があります。したがって、お気に入りのリファレンスでデフォルトを調べる必要があります。

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

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

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


2
これは受け入れられる答えになるはずです。min-width: 0同じことをしません
v010dya

そうですが、親が持っている場合はどうなりmin-widthますか?実際のデフォルトの代わりにそれを取得します。
adi518

7

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

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

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

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


JSについての興味深いアイデア。私が必要とするもののように見えますそして私は最初にCSSを試してみましょう
sergionni

1

さて、display: none;テーブルをまったく表示しませんdisplay: inline-block;。widthおよびmin-width宣言を「auto」のままにしてみてください。


0

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

最小幅設定を元に戻すために私が見つけた最良の方法は次のとおりです。

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

unsetは仕様に含まれていますが、一部のブラウザー(IE 10)はそれを尊重しないため、ほとんどの場合0が適切なフォールバックです。最小幅:0;

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.