html5 - CSS Responsive table not working -

I am working on a responsive CSS for tables. I read a tutorial from this link (How to create a responsive table on CSS) It has worked on some sample page but in my HTML page I have some problems in the resize window and the table responds properly Here's my HTML code:

  & lt; Style & gt; / * Generic Styling, * / Table for Desktops / Laptops {Width: 100%; Degradation: collapse; } / * Zebra striping * / tr: nth-of-type (weird) {background: #eee; } Th {background: # 333; White color; font-weight: bold; } TD, th (padding: 6px; border: 1px solid # ccc; align text: left;} / * The maximum width is spoiled before this particular table. This query is smaller than 760px and specifically for any iPad Will also be effective on screen * / @ Media only screen and (max-width: 760 px), (min-device-width: 768px) and (max-device-width: 1024px) {/ * Force table to table like Not created * / table,, t, th, td, t R {display: block;} / * hide table headers (but not displayed: none;; for access) * / thead tr {position: absolute; top: -99 99px; left: -9999px;} Tr {Border: 1px solid #ccc;} TD {/ * "line" * / remain like limit: none; border bottom: 1px solid #eee; position: relative; padding-left: 50%;} before TD: {/ * Now like table header * / position: absolute; / * top / left value duplicate padding * / up: 6px; left: 6px; width: 45%; padding-right: 10p X; white-space: abrop;} / * data labels * / td: nth-of-type (1): first {content: "first name"; } Td: nth-of-type (2): {content: before "last name"; } TD: NT-OF-Type (3): Before {Content: "Job Title"; } Td: nth-of-type (4): First {content: "Favorite Colors"; } Td: nth-of-type (5): First {content: "Battle of Trek?"; } Td: nth-of-type (6): First {content: "Porn Name"; } Td: nth-of-type (7): first {content: "date of birth"; } Td: nth-of-type (8): Before {content: "Dream Vacation City"; } Td: nth-of-type (9): first {content: "GPA"; } Td: nth-of-type (10): first {content: "arbitrary data"; }} & Lt; / Style & gt; & Lt; Body & gt; & Lt; Table & gt; & Lt; Thead & gt; & Lt; TR & gt; & Lt; Th & gt; First name & lt; / Th & gt; & Lt; Th & gt; Last name & lt; / Th & gt; & Lt; Th & gt; Job title & lt; / Th & gt; & Lt; / TR & gt; & Lt; / Thead & gt; & Lt; Tbody & gt; & Lt; TR & gt; & Lt; TD & gt; James & Lt; / TD & gt; & Lt; TD & gt; Matman & lt; / Td> & Lt; TD & gt; The main sandwich eater & lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; TD & gt; & Lt; / Td> & Lt; TD & gt; Tick ​​& lt; / Td> & Lt; TD & gt; Crimeafir Sara & lt; / Td> & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 It shows the output on the resized window as if the number given below:  
   
 And it worked well on JS-Belal:  
   
 link:  
 What's wrong with my code? Anyone can guide me, thank you!   
 
 
 a  minimum-width  the default element between your specified viewport  Table  and child  tr  if desired.  
  table {width: 100%; Minimum width: 320px; // It should collapse: collapse; }   
 and more.  
  tr {min-width: 200px; // Specify if additional requirements are required}   
 What are you resolving for - I have your  @ media  tablet but for your small shoot Sure for you - in most cases, below  320px;  Do not need to go, so if you lower it then it does not make any difference.  
 In addition, nested  divs ? Why not use