CSS table class is affecting all tables outside of class - html

Question

I'm trying to get a new page up containing a responsive table, using the code below. I've put the code in its own class 'resptable' but for some reason its affecting all tables (even ones not in any class) throughout my site. I can't seem to find why. Any help would be appreciated, thank you!
The CSS -
/*
Generic Styling, for Desktops/Laptops
*/
.resptable table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
.resptable tr:nth-of-type(odd) {
background: #eee;
}
.resptable th {
background: #333;
color: white;
font-weight: bold;
}
.resptable td, th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
#media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
.resptable table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.resptable thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.resptable tr { border: 1px solid #ccc; }
.resptable td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
.resptable td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*/
.resptable td:nth-of-type(1):before { content: "First Name"; }
.resptable td:nth-of-type(2):before { content: "Last Name"; }
.resptable td:nth-of-type(3):before { content: "Job Title"; }
.resptable td:nth-of-type(4):before { content: "Favorite Color"; }
.resptable td:nth-of-type(5):before { content: "Wars of Trek?"; }
.resptable td:nth-of-type(6):before { content: "Porn Name"; }
.resptable td:nth-of-type(7):before { content: "Date of Birth"; }
.resptable td:nth-of-type(8):before { content: "Dream Vacation City"; }
.resptable td:nth-of-type(9):before { content: "GPA"; }
.resptable td:nth-of-type(10):before { content: "Arbitrary Data"; }
}
And here is the HTML:
<table class="resptable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>James</td>
<td>Matman</td>
<td>Chief Sandwich Eater</td>
</tr>
<tr>
<td>The</td>
<td>Tick</td>
<td>Crimefighter Sorta</td>
</tr>
</tbody>
</table>

Answer 1

Such selector:
.resptable table, thead, tbody, th, td, tr
points to:
.resptable table,
thead,
tbody,
th,
td,
tr
So, just first selector in a list has your class resptable. Others are points to every thead, tbody, th, td, tr elements (without your class resptable).
And other point is that you table has resptable class. So, table is not in .resptable but table is .resptable:
table.resptable
I believe you was trying to write another one:
table.resptable,
.resptable thead,
.resptable tbody,
.resptable th,
.resptable td,
.resptable tr