Responsive Table based off of CSS Tricks responsive table by Chris Coyier (replaced the media queries with some javascript to make it more dynamic)

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
  </head>

	<body>
		<table class="responsive-table">
			<thead >
			<tr >
				<th>First Name</th>
				<th>Last Name</th>
				<th >Job Title</th>
				<th>Test</th>
				<th>Test</th>
				<th>Test</th>
				<th>Test</th>
			</tr>
			</thead>
			<tbody >
			<tr >
				<td >James</td>
				<td >Matman</td>
				<td >Chief Sandwich Eater a asdf</td>
				<td>TEST</td>
				<td>TEST</td>
				<td>TEST</td>
				<td>TEST</td>
			</tr>
			<tr >
				<td >The</td>
				<td >Tick</td>
				<td >Crimefighter Sorta</td>
				<td>TESt</td>
				<td>TESt</td>
				<td>TESt</td>
				<td>TESt</td>
			</tr>
						<tr >
				<td >James</td>
				<td >Matman</td>
				<td >Chief Sandwich Eater a asdf</td>
				<td>TEST</td>
				<td>TEST</td>
				<td>TEST</td>
				<td>TEST</td>
			</tr>
			<tr >
				<td >The</td>
				<td >Tick</td>
				<td >Crimefighter Sorta</td>
				<td>TESt</td>
				<td>TESt</td>
				<td>TESt</td>
				<td>TESt</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/