Ghi đè và đặt lại kiểu CSS: tự động hoặc không hoạt động

Tôi muốn ghi đè lên kiểu CSS được xác định cho tất cả các bảng:

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

Tôi có bảng cụ thể với lớp được gọi 'other'.
Cuối cùng trang trí bàn sẽ giống như:

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

vì vậy tôi cần loại bỏ 3 thuộc tính: width, min-widthvàdisplay

Tôi đã cố gắng thiết lập lại bằng nonehoặc auto, nhưng không giúp được gì, ý tôi là những trường hợp sau:

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

Tôi tin rằng lý do tại sao bộ thuộc tính đầu tiên sẽ không hoạt động là vì không có autogiá trị cho display, vì vậy tài sản đó nên được bỏ qua. Trong trường hợp đó, inline-tablevẫn sẽ có hiệu lực và vì widthkhông áp dụng cho inlinecác phần tử, tập hợp các thuộc tính đó sẽ không làm gì cả.

Nhóm thuộc tính thứ hai sẽ chỉ ẩn bảng, vì đó là những gì display: nonedành cho.

tableThay vào đó, hãy thử đặt lại nó :

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

Chỉnh sửa: min-width mặc định 0, khôngauto

"không" không làm những gì bạn cho là nó làm. Để "xóa" thuộc tính CSS, bạn phải đặt nó trở về mặc định, được xác định bởi tiêu chuẩn CSS. Vì vậy, bạn nên tìm kiếm mặc định trong tài liệu tham khảo yêu thích của bạn.

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

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

Thử cái này. Nó sẽ làm việc.

displayThuộc tính mặc định cho một bảng là display:table;. Giá trị hữu ích khác là inline-table. Tất cả các displaygiá trị khác không hợp lệ cho các phần tử bảng.

Không có autotùy chọn để đặt lại về mặc định, mặc dù nếu bạn đang làm việc trong Javascript, bạn có thể đặt nó thành một chuỗi trống, điều này sẽ thực hiện thủ thuật.

width:auto;là hợp lệ, nhưng không phải là mặc định. Chiều rộng mặc định cho một bảng là 100%, trong khi đó width:auto;sẽ làm cho phần tử chỉ chiếm nhiều chiều rộng như nó cần.

min-width:auto;không được phép. Nếu bạn đặt min-width, nó phải có giá trị, nhưng đặt nó thành 0 có lẽ cũng tốt như đặt lại về mặc định.

Chà, display: none;hoàn toàn không hiển thị bảng, hãy thử display: inline-block;với các khai báo chiều rộng và chiều rộng tối thiểu còn lại là 'tự động'.

Tôi đã kết thúc việc sử dụng Javascript để hoàn thiện mọi thứ.

Fiddle JS của tôi: 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); 
    }
})

Cách tốt nhất mà tôi đã tìm thấy để hoàn nguyên cài đặt độ rộng tối thiểu là:

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

unset nằm trong thông số kỹ thuật, nhưng một số trình duyệt (IE 10) không tôn trọng nó, vì vậy 0 là một dự phòng tốt trong hầu hết các trường hợp. chiều rộng tối thiểu: 0;