cssを使用して特定のdiv要素の表示ブロックを回避する方法

Question

私のメディアクエリでは、display：blockというテーブルを設定しました。だから今display：ブロックはサイトのすべての要素に適用されます。表示を避ける方法：ブロックするので、特定のdiv要素には適用されません。

{ font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, th, tr{ 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 10px; 
 
} 
 

 

 
@media only screen and (max-width: 460px) { 
 

 

 
/* Force table to not be like tables anymore */ 
 
\t table, th, tbody, td, thead { 
 
\t \t display: block; 
 
\t \t width: 100%; 
 
\t } 
 
    
 
#content { 
 
\t 
 

 
\t } 
 
    
 
}

<div id="content"> 
 
    <h1>Article Question is</h1> 
 
    <p>Below I have table inside the article. How to avoid display block for the table below on mobile screens?</p> 
 
<table> 
 
    <tr> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Alfreds Futterkiste</td> 
 
    <td>Maria Anders</td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Centro comercial Moctezuma</td> 
 
    <td>Francisco Chang</td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Ernst Handel</td> 
 
    <td>Roland Mendel</td> 
 
    <td>Austria</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Island Trading</td> 
 
    <td>Helen Bennett</td> 
 
    <td>UK</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Laughing Bacchus Winecellars</td> 
 
    <td>Yoshi Tannamuri</td> 
 
    <td>Canada</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Magazzini Alimentari Riuniti</td> 
 
    <td>Giovanni Rovelli</td> 
 
    <td>Italy</td> 
 
    </tr> 
 
</table> 
 
</div>

Answer 1

多分このような何か？

@media only screen and (max-width: 460px) { 

/* Force table to not be like tables anymore */ 
    table, th, tbody, td, thead { 
     display: block; 
     width: 100%; 
    } 

    #content table, #content th, #content tbody, #content td, #content thead { 
     display: initial; 
    } 

} 

Answer 2

:notを使用して、#contentテーブルだけを避けることもできます。

@media only screen and (max-width: 460px) { 


/* Force table to not be like tables anymore */ 
    table:not(#content table), 
    th:not(#content th), 
    tbody:not(#content tbody), 
    td:not(#content td), 
    thead:not(#content thead) { 
     display: block; 
     width: 100%; 
    } 

#content { 


    } 

} 

どちらかこれかKodieGranthamのソリューション@動作するはずです。それはおそらく好みの問題です。