<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//s3.amazonaws.com/libapps/sites/210/include/style.css">
</head>
<body>
<table class="responsive-table">
<thead >
<tr >
<th>Name</th>
<th>Location</th>
<th>Type & #</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
</thead>
<tbody >
<tr >
<td><a href="http://irsc-asc.weebly.com/">Academic Support Center</a><hr>
<em>Computer Information</em>: Student use only. B&W printing 10c/page. No time limit.
</td>
<td>L200</td>
<td>15 (PC)</td>
<td>1 p.m. - 5 p.m.</td>
<td>8 a.m. - 9 p.m.</td>
<td>8 a.m. - 9 p.m.</td>
<td>8 a.m. - 9 p.m.</td>
<td>8 a.m. - 9 p.m.</td>
<td>8 a.m. - 2 p.m.</td>
<td>Closed</td>
</tr>
<tr >
<td><a href="https://www.irsc.edu/careercenter/careercenter.aspx">Career Center</a><hr>
<em>Computer Information</em>: Student/Alumni use only. Free B&W printing (5 page max). Scanner available for student use.
Software includes WinWay Resume, Microsoft Office.
</td>
<td>W104</td>
<td>18 (PC)</td>
<td>Closed</td>
<td>8 a.m. - 6:30 p.m.</td>
<td>8 a.m. - 6:30 p.m.</td>
<td>8 a.m. - 6:30 p.m.</td>
<td>8 a.m. - 6:30 p.m.</td>
<td>8 a.m. - 5 p.m.</td>
<td>Closed</td>
</tr>
<tr >
<td><a href="http://irsc.libguides.com/aboutthelibraries">Miley Library</a><hr>
<em>Computer Information</em>: Student and community computers available. time limit for community use.
B&W printing 10c/page.
Printing (B&W), research assistance, Microsoft Office.<br>
For more information, view the
<a href="http://irsc.libguides.com/c.php?g=553156&p=3800300">College library guidelines.</a>
</td>
</td>
<td>L100</td>
<td >24 (PC)</td>
<td>1 p.m. - 5 p.m.</td>
<td>7:45 a.m - 9 p.m.</td>
<td>7:45 a.m - 9 p.m.</td>
<td>7:45 a.m - 9 p.m.</td>
<td>7:45 a.m - 9 p.m.</td>
<td>7:45 a.m - 5 p.m.</td>
<td>Closed</td>
</tr>
<tr >
<td>Student Services <hr>
<em>Computer Information</em> Student use only (ID required). B&W printing 10c/page. No time limit.
B&W Printing is free (5 page limit).
</td>
<td>W103</td>
<td>33 (PC)</td>
<td>Closed</td>
<td>8 a.m. - 6:30 p.m.</td>
<td>8 a.m. - 6:30 p.m.</td>
<td>8 a.m. - 6:30 p.m.</td>
<td>8 a.m. - 6:30 p.m.</td>
<td>8 a.m. - 5 p.m.</td>
<td>Closed</td>
</tr>
<tr >
<td>Kight Center Computer Lab <hr>
<em>Services and information: Services vary.
</em>:
</td>
<td>V216</td>
<td>18 (Mac)</td>
<td>Closed</td>
<td>10 a.m. - 8 p.m.</td>
<td>10 a.m. - 8 p.m.</td>
<td>10 a.m. - 8 p.m.</td>
<td>10 a.m. - 8 p.m.</td>
<td>10 a.m. - 8 p.m.</td>
<td>10 a.m. - 4 p.m.</td>
</tr>
<tr >
<td>Computer Science Labs<hr>
<em>Services and information</em>: Lab hours and services vary.
</td>
<td>Various</td>
<td>Various</td>
<td colspan= 7><center><a href="http://irsccsdept.org/schedule/">Check Lab Schedule</a></center></td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
window.onload = function () {
'use strict';
var i,
element;
//create headers for the mobile view
(function () {
var headers = document.querySelectorAll("th"),
index = 1,
columns = document.querySelectorAll("td"),
headerName,
responsiveHeader;
if (columns.length > 0) {
for (i = 0; i < columns.length; i += 1) {
if (index > headers.length) {
index = 1;
}
//mobile headers are actually td
element = columns[i];
headerName = document.querySelector('th:nth-of-type(' + index + ')').textContent;
responsiveHeader = document.createElement("td");
responsiveHeader.className = "responsive-header";
responsiveHeader.innerHTML = headerName;
element.parentNode.insertBefore(responsiveHeader, element);
index+=1;
}
}
}());
var tableMinWidth,
hasBeenSet = false;
//addds mobile class for table when table is larger than screen
function sytleTable () {
var tableWidth = document.querySelector('.responsive-table').offsetWidth,
windowWidth = window.innerWidth,
responsiveTables = document.getElementsByClassName('responsive-table');
if (tableWidth >= windowWidth) {
if (!hasBeenSet) {
tableMinWidth = tableWidth;
hasBeenSet = true;
}
for (i = 0; i < responsiveTables.length; i += 1) {
element = responsiveTables[i];
element.classList.add("mobile");
}
} else if (tableWidth >= tableMinWidth) {
for (i = 0; i < responsiveTables.length ; i += 1) {
element = responsiveTables[i];
element.classList.remove("mobile");
}
}
}
window.onresize = function () {
sytleTable();
};
sytleTable();
}; //window.onload
/*Responsive Tables*/
tr:nth-of-type(odd) {
background: #eee;
}
th {
font-weight: bold;
}
td,
th {
padding: 6px;
text-align: left;
}
.responsive-header {
display: none;
}
/*Mobile*/
.responsive-table.mobile,
.mobile thead,
.mobile tbody,
.mobile th,
.mobile td,
.mobile tr {
display: block;
}
.mobile thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.mobile tr {
border: 1px solid #ccc;
}
.mobile td {
border: none;
border-bottom: 1px solid #ccc;
position: relative;
text-align: right;
word-wrap: break-word;
}
.mobile .responsive-header {
font-size: 18px !important;
color: #444444 !important;
font-weight: bold;
display: inline;
float: left;
padding: 0px !important;
padding-left: 5px!important;
border:none;
;
}
.mobile td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
I replaced the media queries with some javascirpt to make it a little more dynamic. you can find the orignal article here https://css-tricks.com/responsive-data-tables/