Почему свойства CSS не выбираются при уменьшении ширины браузера?

Question

У меня есть файл CSS, где у меня есть медиа-экран для отзывчивого дизайна. Но проблема в том, что все работает нормально, но свойства CSS не принимаются по таблице id = «телефон».

Ниже приведено мое код. Скажи мне, что может быть проблемой.

@media only screen and (max-width: 760px), 
 
(min-device-width: 768px) and (max-device-width: 1024px) { 
 
    /* table properties for phone */ 
 
    table#phone thead, tbody, th, td, tr { 
 
     display: block; 
 
    } 
 

 
    /* table properties for datepicker */ 
 
    table:(.ui-datepicker) table, thead, tbody, th, td, tr { 
 
    display:none; 
 
    }

Answer 1

Потому что ваш код ориентации все на td, th, tr, tbody. Он должен быть конкретным, как показано ниже.

@media only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px) { 
/* table properties for phone */ 
table#phone thead, 
table#phone tbody, 
table#phone th, 
table#phone td, 
table#phone tr { 
    display: block; 
} 

/* table properties for datepicker */ 
table.ui-datepicker table, 
table.ui-datepicker thead, 
table.ui-datepicker tbody, 
table.ui-datepicker th, 
table.ui-datepicker td, 
table.ui-datepicker tr { 
display:none; 
} 

Answer 2

Попробуйте это.

@media only screen and (max-width: 760px), 
 
      (min-device-width: 768px) and (max-device-width: 1024px) { 
 
     
 
     /* table properties for phone */ 
 
     table.phone thead, 
 
     table.phone tbody, 
 
     table.phone th, 
 
     table.phone td, 
 
     table.phone tr { 
 
      display: block; 
 
     } 
 

 
     /* table properties for datepicker */ 
 
     table:(.ui-datepicker) table, 
 
     table:(.ui-datepicker) thead, 
 
     table:(.ui-datepicker) tbody, 
 
     table:(.ui-datepicker) th, 
 
     table:(.ui-datepicker) td, 
 
     table:(.ui-datepicker) tr { 
 
      display:none; 
 
     } 
 
    }

Вот больше информации о CSS Специфичность: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 3

Я думаю, вы должны попробовать, как следующее.

table#phone thead,table#phone tbody,table#phone th,table#phone td,table#phone tr 
{ 
    display: block; 
}