How to create responsive table

Question

I have this table. i need to make this table as mobile responsive. i tried a lot but failed. this table has two row of table headings. i need this both table heading in responsive design also. if any can help me to make this table as responsive design.

This is code

table { 
width: 100%; 
border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
 background: #eee; 
}
th { 
background: #cc3634; 
color: white; 
font-weight: bold; 
}
td, th { 
padding: 6px; 
border: 1px solid #cc3634; 
text-align: center !important;
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
display: block; 
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td { 
/* Behave  like a "row" */
border: none;
border-bottom: 1px solid #eee; 
position: relative;
padding-left: 50%; 
}
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;
 }  
td:nth-of-type(1):before { c`enter code here`ontent: "Open"; }
td:nth-of-type(2):before { content: "Close"; }
td:nth-of-type(3):before { content: "Open"; }
td:nth-of-type(4):before { content: "Close"; }
}

   

<table>
    <thead>
          <tr>
            <th class="border"/>
            <th colspan="2" class="border">Semester Hours (GMT)</th>
            <th colspan="2" class="border">Revision/Examination</th>
          </tr>
        <tr>
            <th class="border"/>
            <th class="border">Open</th>
            <th class="border">Close</th>
            <th class="border">Open</th>
            <th class="border">Close</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" class="border">Monday - Friday</th>
            <td>9:00 AM </td>
            <td>5:00 PM</td>
            <td>9:00 AM </td>
            <td>5:00 PM</td>
        </tr>
        <tr>
            <th scope="row" class="border">Saturdays</th>
            <td>9:00 AM </td>
            <td>5:00 PM</td>
            <td>9:00 AM </td>
            <td>5:00 PM</td>
        </tr>
    </tbody>
</table>[enter image description here][1]

i have attached the table image how i need in mobile view enter image description here