title: Make existing bootstrap 2 table responsive
body: <p>I'm working on a project where I need to change existing Boostrap2 table responsive. I made a <a href="https://jsfiddle.net/78rnkdev/" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>&lt;table class="table head center"&gt;
      &lt;caption&gt;&lt;/caption&gt;
      &lt;tr&gt;
      &lt;th scope="col"&gt;Member&lt;/th&gt;
      &lt;th scope="col"&gt;Date&lt;/th&gt;
      &lt;th scope="col"&gt;Usage&lt;/th&gt;
      &lt;th scope="col"&gt;Native&lt;/th&gt;
      &lt;th scope="col"&gt;Coverage&lt;/th&gt;
      &lt;th scope="col"&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr id="members-repeat-container" ng-repeat=""&gt;
      &lt;td&gt;You&lt;/td&gt;
      &lt;/tr&gt;
     &lt;/table&gt;   
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/s7KT2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s7KT2.png" alt="This is how it looks on Desktop"></a>
  <a href="https://i.stack.imgur.com/qlG9v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qlG9v.png" alt="This is how it looks on Mobile"></a></p>
  
  <p><a href="https://i.stack.imgur.com/0cTuh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0cTuh.png" alt="THIS IS ECPECTED"></a></p>