it-roy-ru.com

Переопределить и сбросить стиль CSS: автоматически или ничего не работает

Я хотел бы переопределить следующий стиль 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;
}
115
sergionni

Я полагаю, что причина, по которой первый набор свойств не будет работать, заключается в том, что нет значения auto для display , поэтому это свойство следует игнорировать. В этом случае inline-table все равно вступит в силу, и, поскольку width не применяется к элементам inline, этот набор свойств ничего не будет делать. 

Второй набор свойств просто скроет таблицу, для чего и предназначен display: none

Попробуйте вместо этого сбросить table

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

Edit:min-width по умолчанию 0, а не auto

170
Yi Jiang

«никто» не делает то, что вы предполагаете. Чтобы «очистить» свойство 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; вообще не будет отображать таблицу, попробуйте display: inline-block; с объявлениями ширины и минимальной ширины, оставшимися «auto».

1
Steven

Лучший способ найти минимальную ширину:

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

unset есть в спецификации, но некоторые браузеры (IE 10) не соблюдают его, поэтому 0 - хороший запасной вариант в большинстве случаях . min-width: 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