How to exclude table from certain styles - html

Question

I have a <table> that I am trying to make mobile-friendly with some CSS. However, I do not want this 'mobile-friendly' CSS to apply to all our tables. The CSS should not be applied to tables that have the class no-wrap. All of the tables we use have the class .table2. We also have a lot of nested tables. And these nested tables are the main problem. Here is an example with jsfiddle.
As you can see in the example, the first table has 2 classes; table2 and no-wrap. I do not want to apply the 'mobile-friendly' CSS to tables that have the no-wrap class. So the first example works fine because the CSS is not applied. However, the second table also has the no-wrap class, but I guess because it is nested inside another table (that also has the class table2), it does not look at the :not(.no-wrap) selector and the CSS is applied.
Code for reference:
.table2 {
color: #000000;
width: 100%;
table-layout: fixed;
overflow: hidden;
border-spacing: 10px 5px;
border: 1px solid gray;
}
#media only screen and (max-width: 1024px) {
.track table.table2:not(.no-wrap),
.track .table2:not(.no-wrap) thead,
.track .table2:not(.no-wrap) tbody,
.track .table2:not(.no-wrap) th,
.track .table2:not(.no-wrap) td,
.track .table2:not(.no-wrap) tr {
display: block;
}
.track .table2:not(.no-wrap) tr {
margin: 20px;
}
.track .table2:not(.no-wrap) tr[height] {
height: 0;
}
.track .table2:not(.no-wrap) td {
position: relative;
margin: 5px 0;
}
}
<div class="track">
<table cellspacing="0" cellpadding="0" class="table2 no-wrap">
<tbody>
<tr height="19">
<td width="170"></td>
<td></td>
<td width="80"></td>
<td width="80"></td>
<td width="80"></td>
<td width="80"></td>
<td width="100"></td>
</tr>
<tr>
<td class="trackFormHeaderTitle">Artikel</td>
<td class="trackFormHeaderTitle">Omschrijving</td>
<td class="trackFormHeaderTitle" align="right">Aantal </td>
<td class="trackFormHeaderTitle" align="right">Bruto prijs </td>
<td class="trackFormHeaderTitle" align="right">Netto prijs </td>
<td class="trackFormHeaderTitle" align="right">Kostprijs </td>
<td class="trackFormHeaderTitle"> BTW</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpAll trackFormBodyCellLink">
<font size="2">BBA</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB">
<font size="2">Bezoek Bedrijfsarts</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">1,000</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">175,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">175,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">100,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB">
<font size="2">Hoog-tarief</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpLRB"> </td>
<td bgcolor="#FFFFFF" class="inpRB"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpLRB trackFormBodyCellLink">
<font size="2">REISKOSTEN</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB">
<font size="2">Reiskosten</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">1,000</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">75,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">75,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">0,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB">
<font size="2">Geen</font>
</td>
</tr>
</tbody>
</table>
<div style="margin: 100px 0;">
<hr />
</div>
<table class="table2">
<tr>
<td>
<table cellspacing="0" cellpadding="0" class="table2 no-wrap">
<tbody>
<tr height="19">
<td width="170"></td>
<td></td>
<td width="80"></td>
<td width="80"></td>
<td width="80"></td>
<td width="80"></td>
<td width="100"></td>
</tr>
<tr>
<td class="trackFormHeaderTitle">Artikel</td>
<td class="trackFormHeaderTitle">Omschrijving</td>
<td class="trackFormHeaderTitle" align="right">Aantal </td>
<td class="trackFormHeaderTitle" align="right">Bruto prijs </td>
<td class="trackFormHeaderTitle" align="right">Netto prijs </td>
<td class="trackFormHeaderTitle" align="right">Kostprijs </td>
<td class="trackFormHeaderTitle"> BTW</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpAll trackFormBodyCellLink">
<font size="2">BBA</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB">
<font size="2">Bezoek Bedrijfsarts</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">1,000</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">175,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">175,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB" align="right">
<font size="2">100,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpTRB">
<font size="2">Hoog-tarief</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpLRB"> </td>
<td bgcolor="#FFFFFF" class="inpRB"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB" align="right"> </td>
<td bgcolor="#FFFFFF" class="inpRB"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="inpLRB trackFormBodyCellLink">
<font size="2">REISKOSTEN</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB">
<font size="2">Reiskosten</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">1,000</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">75,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">75,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB" align="right">
<font size="2">0,00</font>
</td>
<td bgcolor="#FFFFFF" class="inpRB">
<font size="2">Geen</font>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>

Answer 1

Solution
Don't use :not() because it's quirks make it unreliable and difficult with nested selectors.
Use an additional class to the other <table>s (ex. .wrap) and make it diametrically oppose .no-wrap.
Do not use a class that both types of <table> share (ie .table2).
Other Problems
<font> is HTML4 not HTML5, use a <span> and apply CSS to it.
Attributes cellspacing, cellpadding, bgcolor, and align are deprecated. Use CSS properties border-spacing, padding, background-color, and text-align.
In the example, there are 2 <table>s with .no-wrap (one of them is nested within another <table>) and 2 <table>s with .wrap (one of them is also nested within another <table>).
.table2 {
color: #000000;
width: 100%;
table-layout: fixed;
overflow: hidden;
border-spacing: 10px 5px;
border: 1px solid gray;
}
tbody > tr:first-of-type {height: 19px}
tr, td {outline: 1px dashed red;}
.wrap {outline: 3px dotted cyan}
.no-wrap {outline: 3px dotted lime}
#media only screen and (max-width: 1024px) {
table.wrap,
table.wrap > :is(thead, tbody, tfoot),
table.wrap > :is(thead, tbody, tfoot) > tr,
table.wrap > :is(thead, tbody, tfoot) > tr > :is(th, td) {display: block}
table.wrap > :is(thead, tbody, tfoot) > tr {margin: 20px}
table.wrap > tbody > tr:first-of-type {height:0}
table.wrap > :is(thead, tbody, tfoot) > tr > td {position:relative;margin:5px 0}
table.no-wrap,
table.no-wrap > :is(thead, tbody, tfoot),
table.no-wrap > :is(thead, tbody, tfoot) > tr,
table.no-wrap > :is(thead, tbody, tfoot) > tr > :is(th, td) {display: default;}
table.no-wrap > :is(thead, tbody, tfoot) > tr {margin: 0;}
table.no-wrap > tbody > tr:first-of-type {height: 19px;}
table.no-wrap > :is(thead, tbody, tfoot) > tr > td {position: static;margin: 0;}
}
<div class="track">
<table class="table2 no-wrap">
<tbody> <tr> <td width="170"></td> <td></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="100"></td> </tr> <tr> <td>Artikel</td> <td>Omschrijving</td> <td align="right">Aantal </td> <td align="right">Bruto prijs </td> <td align="right">Netto prijs </td> <td align="right">Kostprijs </td> <td> BTW</td> </tr> <tr> <td> <span>BBA</span> </td> <td> <span>Bezoek Bedrijfsarts</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>100,00</span> </td> <td> <span>Hoog-tarief</span> </td> </tr> <tr> <td> </td> <td> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td> </td> </tr> <tr> <td> <span>REISKOSTEN</span> </td> <td> <span>Reiskosten</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>0,00</span> </td> <td> <span>Geen</span> </td> </tr> </tbody> </table> <hr />
<table class="table2"> <tr> <td>
<table class="table2 no-wrap"> <tbody> <tr> <td width="170"></td> <td></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="100"></td> </tr> <tr> <td>Artikel</td> <td>Omschrijving</td> <td align="right">Aantal </td> <td align="right">Bruto prijs </td> <td align="right">Netto prijs </td> <td align="right">Kostprijs </td> <td> BTW</td> </tr> <tr> <td> <span>BBA</span> </td> <td> <span>Bezoek Bedrijfsarts</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>100,00</span> </td> <td> <span>Hoog-tarief</span> </td> </tr> <tr> <td> </td> <td> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td> </td> </tr> <tr> <td> <span>REISKOSTEN</span> </td> <td> <span>Reiskosten</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>0,00</span> </td> <td> <span>Geen</span> </td> </tr> </tbody> </table> </td> </tr> </table> <hr>
<table class="table2 wrap">
<tbody> <tr> <td width="170"></td> <td></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="100"></td> </tr> <tr> <td>Artikel</td> <td>Omschrijving</td> <td align="right">Aantal </td> <td align="right">Bruto prijs </td> <td align="right">Netto prijs </td> <td align="right">Kostprijs </td> <td> BTW</td> </tr> <tr> <td> <span>BBA</span> </td> <td> <span>Bezoek Bedrijfsarts</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>100,00</span> </td> <td> <span>Hoog-tarief</span> </td> </tr> <tr> <td> </td> <td> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td> </td> </tr> <tr> <td> <span>REISKOSTEN</span> </td> <td> <span>Reiskosten</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>0,00</span> </td> <td> <span>Geen</span> </td> </tr> </tbody> </table>
<table class="table2"> <tr> <td>
<table class="table2 wrap"> <tbody> <tr> <td width="170"></td> <td></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="80"></td> <td width="100"></td> </tr> <tr> <td>Artikel</td> <td>Omschrijving</td> <td align="right">Aantal </td> <td align="right">Bruto prijs </td> <td align="right">Netto prijs </td> <td align="right">Kostprijs </td> <td> BTW</td> </tr> <tr> <td> <span>BBA</span> </td> <td> <span>Bezoek Bedrijfsarts</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>175,00</span> </td> <td align="right"> <span>100,00</span> </td> <td> <span>Hoog-tarief</span> </td> </tr> <tr> <td> </td> <td> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td align="right"> </td> <td> </td> </tr> <tr> <td> <span>REISKOSTEN</span> </td> <td> <span>Reiskosten</span> </td> <td align="right"> <span>1,000</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>75,00</span> </td> <td align="right"> <span>0,00</span> </td> <td> <span>Geen</span> </td> </tr> </tbody> </table> </td> </tr> </table>
</div>