Convert Asp.Net Gridview to Responsive Divs

It will converts the gridview to divs which is responsive and user friendly. just pass the cssclass of gridview to gridClass variable...

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<table>
  <col width="100px"/>
 <tr class="month1">
    <td class="w1"><div>01</div></td>
    <td class="w1"><div>02</div></td>
    <td class="w1"><div>03</div></td>
    <td class="w1"><div>04</div></td>
    <td class="w1"><div>05</div></td>
    <td class="w1"><div>06</div></td>
    <td class="w1"><div>07</div></td>
 
 
    <td class="w2"><div>08</div></td>
    <td class="w2"><div>09</div></td>
    <td class="w2"><div>10</div></td>
    <td class="w2"><div>11</div></td>
    <td class="w2"><div>12</div></td>
    <td class="w2"><div>13</div></td>
    <td class="w2"><div>14</div></td>
  </tr>
 <tr class="month2">
    <td class="w21"><div>01a</div></td>
    <td class="w21"><div>02a</div></td>
    <td class="w21"><div>03a</div></td>
    <td class="w21"><div>04a</div></td>
    <td class="w21"><div>05a</div></td>
    <td class="w21"><div>06a</div></td>
    <td class="w21"><div>07a</div></td>
 
 
    <td class="w22"><div>08a</div></td>
    <td class="w22"><div>09a</div></td>
    <td class="w22"><div>10a</div></td>
    <td class="w22"><div>11a</div></td>
    <td class="w22"><div>12a</div></td>
    <td class="w22"><div>13a</div></td>
    <td class="w22"><div>14a</div></td>
  </tr> 
 
</table>

<div id="run1">add</div>
<div id="run2">remove</div>

CSS

table { border-collapse: collapse;
   table-layout:fixed; }
  td {
    height:40px;
    width:40px;
    text-align:center;
    margin:0; padding:0 ; 
       border:5px solid white;
    background-color:#B388FF;

  }

    div {
    vertical-align:middle;
    -webkit-user-select: none;  /* Chrome all / Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none;          /* Likely future */     
  }

  td:hover {
    background-color:blue;
  }

JavaScript

$("#run1").click(function () {
  $('.w1').wrapAll('<tr class="week1"></tr>'); 
  $('.w2').wrapAll('<tr class="week2"></tr>'); 
  $('.w21').wrapAll('<tr class="week1"></tr>'); 
  $('.w22').wrapAll('<tr class="week2"></tr>'); 
  $(".month2").hide();
  
});

$("#run2").click(function () {
  $('.w1').unwrap();
  $('.w2').unwrap();
  $('.w21').unwrap();
  $('.w22').unwrap();
  $(".month2").show();
  
});