Girts Girts - 3 months ago 9
CSS Question

How to avoid display block for a particular div element using css

In my media query I have set tables to display: block. So now display: block applies now to all the elements of the site. How to avoid display: block so it doesn't apply for one particular div element.



{ 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 */
table, th, tbody, td, thead {
display: block;
width: 100%;
}

#content {


}

}

<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

You can also use :not to avoid just that #content table.

@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 {


    }

 }

Either this or @KodieGrantham's solution should work; which one is probably a matter of preference.