дисплей ячейка таблицы ни в стиле тег

я мог бы быть отсутствующим что-то действительно очевидным, однако не рассмотрит следующий код (протестировано в Крае и Chrome):дисплей ячейка таблицы ни в стиле тег

<head> 
    <style> 
    .table td { display:table-cell; } 
    .hide { display: none; } 
    </style> 
</head> 
<body> 
    <table class="table"> 
    <tr> 
     <td class="hide">This is supposed to be hidden</td> 
    </tr>  
    </table> 
</body>

Вот является JSFiddle demo, а также.

Почему ребенок <td> игнорирует код display:none?

Теперь, я знаю, что, например, удаление класса .table или подкладка <td style="display:none"> даст мне желаемый результат (скрывая ячейку).

Я заинтересован в понимании логики этого поведения.

источник

2017-02-05 remdevtec

Почему не ребенок не обращая внимания на дисплей: нет?

Потому что .table td более конкретно как .hide. Вы столкнулись с концепцией css specifitiy.

Посмотрите здесь: https://specificity.keegan.st

источник

2017-02-05 10:01:10 gearsdigital

Perfect. Спасибо за ссылку. – remdevtec

Это потому, что .table td { display:table-cell; } ближайший селектор CSS в td чем .hide { display: none; }, так что вы можете решить эту проблему путем добавления td.hide { display:none; }

источник

2017-02-05 09:55:29 acesmndr

Фактическая причина в том, Вы не можете добавлять как display:table-cell; и display: none; к тому же DOM свойства. В этом случае вы даете два разных значения для того же свойства, где CSS дает значение для display:table-cell;

Проверьте другой ответ, приведенный здесь, в котором говорится о «Специфике CSS».

Два способа преодоления этой проблемы.

Один добавляет тег !important для стиля, который вы хотите применить, что является плохой практикой. Другим решением является добавление visibility: hidden, которое скроет элемент из представления.

источник

2017-02-05 10:06:10

дисплей ячейка таблицы ни в стиле тег

ответ

Смежные вопросы