JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div class="table rmit-table__nostyle aem-GridColumn aem-GridColumn--default--12">
  <div class="rmit-table__wrapper hidden-xs hidden-sm">
    <div class="cmp-text">
      <table width="100%" cellspacing="0" cellpadding="1" border="1">
        <tbody>
          <tr>
            <th scope="col">Col 1</th>
            <th scope="col">Col 2</th>
            <th scope="col">Col 3</th>
          </tr>
          <tr>
            <td>R1C1</td>
            <td>R1C2</td>
            <td>R1C3</td>
          </tr>
          <tr>
            <td>R2C1</td>
            <td>R2C2</td>
            <td>R2C3</td>
          </tr>
          <tr>
            <td>R3C1</td>
            <td>R3C2</td>
            <td>R3C3</td>
          </tr>
        </tbody>
      </table>

    </div>



  </div>

  <!-- mobile starts -->
  <div class="rmit-table__wrapper--mobi aem-Grid aem-Grid--phone--12 hidden-md hidden-lg">
    <div class="rmittable-mobi__leftchevron">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
            <g fill="none" fill-rule="evenodd">
                <path d="M0 0h32v40H0z"></path>
                <path fill="#333" fill-rule="nonzero" d="M20.889 12h-1.232L12 20.076 19.657 28h1.232l-7.716-7.924z"></path>
            </g>
        </svg>
    </div>

    <div class="rmittable-mobi__rightchevron">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="40" viewBox="0 0 32 40">
            <g fill="none" fill-rule="evenodd">
                <path d="M0 0h32v40H0z"></path>
                <path fill="#333" fill-rule="nonzero" d="M12 12h1.314l8.167 8.076L13.314 28H12l8.23-7.924z"></path>
            </g>
        </svg>
    </div>

    <div class="cmp-text">
      <table width="100%" cellspacing="0" cellpadding="1" border="1">
        <tbody>
          <tr>
            <th scope="col">Col 1</th>
            <th scope="col">Col 2</th>
            <th...

CSS

.hide {
  display: none;
}

JavaScript

var prog_list= (function(){
var prog_table = $(".xm-grouped-table");
//alert(prog_table.length);
//$.each( prog_table, function(index, table) {
 // $(this).find("tr").unwrap();
//});

$(".xm-grouped-table").find("tr").unwrap();
$(".xm-grouped-table").find("tbody").remove();
$(".xm-grouped-table").wrapInner("<tbody></tbody>");
$(".xm-grouped-table").attr({
  width:"100%",
  cellspacing:"1",
  border:"1",
  cellpadding:"1"
});
$(".xm-grouped-table").find(".m-program-list-location a").contents().unwrap();
var div1 = $("<div></div>").addClass("table rmit-table__nostyle aem-GridColumn aem-GridColumn--default--12");
var div2 = $("<div></div>").addClass("rmit-table__wrapper hidden-xs hidden-sm");
var div3 = $("<div></div>").addClass("cmp-text");
//var div4 = div1.append(div2).append(div3);
$(".xm-grouped-table").wrap(div1).wrap(div2).wrap(div3);
$(".xm-grouped-table").removeClass("table");
$(".xm-grouped-table").find(".m-program-list-title .visible-xxs").removeClass("visible-xxs").addClass("hide");
$(".xm-grouped-table").find("caption").remove();
  

})();