Wrap and unwrap tables using jQuery based on screen width

test.html

<!-- HTML -->
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>



<!-- CSS -->
/* Responsive tables class */
.scrollable-table {
  overflow-x:scroll;
}


<!-- JS -->
/**
 * Responsive tables 
 * 
 */
if( $(window).width() > 500 ){

  //remove wrapper around tables
  if ( $('table').parent().is( "div.scrollable-table" ) ) {
    pTags.unwrap();
  }

  console.log("Responsive tables disabled");


 } else {

  //add table wrapper
  $('table').wrap('<div class="scrollable-table"></div>');

  console.log("Responsive tables enabled");

}