Ganti dan setel ulang gaya CSS: otomatis atau tidak ada yang tidak berfungsi

Saya ingin mengganti penataan CSS berikut yang ditentukan untuk semua tabel:

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

Saya memiliki tabel khusus dengan kelas yang disebut 'other'.
Akhirnya dekorasi meja akan terlihat seperti:

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

jadi saya perlu menghapus 3 sifat: width, min-widthdandisplay

Saya mencoba mengatur ulang dengan noneatau auto, tetapi tidak membantu, maksud saya kasus ini:

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

Saya percaya alasan mengapa set properti pertama tidak akan berfungsi adalah karena tidak ada autonilai untuk display, sehingga properti harus diabaikan. Dalam hal ini, inline-tablemasih akan berlaku, dan karena widthtidak berlaku untuk inlineelemen, set properti tidak akan melakukan apa pun.

Set properti kedua hanya akan menyembunyikan tabel, karena itulah gunanya display: none.

Coba atur ulang ke table:

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

Edit: min-width default ke 0, bukanauto

"tidak ada" tidak melakukan apa yang Anda asumsikan. Untuk "menghapus" properti CSS, Anda harus mengaturnya kembali ke default, yang ditentukan oleh standar CSS. Dengan demikian Anda harus mencari default di referensi favorit Anda.

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

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

Coba ini. Itu akan berhasil.

displayProperti default untuk tabel adalah display:table;. Satu-satunya nilai berguna lainnya adalah inline-table. Semua displaynilai lain tidak valid untuk elemen tabel.

Tidak ada autoopsi untuk mengatur ulang ke default, meskipun jika Anda bekerja dalam Javascript, Anda dapat mengaturnya ke string kosong, yang akan melakukan trik.

width:auto;valid, tetapi bukan default. Lebar default untuk tabel adalah 100%, sedangkan width:auto;akan membuat elemen hanya mengambil lebar sebanyak yang dibutuhkan.

min-width:auto;tidak diizinkan Jika Anda mengatur min-width, itu harus memiliki nilai, tetapi mengaturnya ke nol mungkin sama baiknya dengan mengatur ulang ke default.

Yah, display: none;tidak akan menampilkan tabel sama sekali, coba display: inline-block;dengan lebar dan min-lebar deklarasi yang tersisa 'otomatis'.

Saya akhirnya menggunakan Javascript untuk menyempurnakan semuanya.

Biola JS saya: 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); 
    }
})

Cara terbaik yang saya temukan untuk mengembalikan pengaturan min-width adalah:

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

unset ada dalam spec, tetapi beberapa browser (IE 10) tidak menghargainya, jadi 0 adalah fallback yang bagus dalam banyak kasus. min-width: 0;