Which is the best practices to create a responsive table? : <p>I have this sample:</p>

<p><a href="http://codepen.io/anon/pen/ONZBgB" rel="nofollow">link</a></p>

<p><strong>CODE HTML:</strong></p>

<pre><code>&lt;table class="table table-striped"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;td&gt;First Name&lt;/td&gt;
      &lt;td&gt;Last Name&lt;/td&gt;
      &lt;td&gt;Email&lt;/td&gt;
      &lt;td&gt;Phone&lt;/td&gt;
      &lt;td&gt;Adresss&lt;/td&gt;
      &lt;td&gt;Message&lt;/td&gt;
    &lt;/tr&gt;  
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;John&lt;/td&gt;
      &lt;td&gt;Smith&lt;/td&gt;
      &lt;td&gt;jhs@yahoo.com&lt;/td&gt;
      &lt;td&gt;0766323123&lt;/td&gt;
      &lt;td&gt;Test&lt;/td&gt;
      &lt;td&gt;Test&lt;/td&gt;
    &lt;/tr&gt;  
    &lt;tr&gt;
      &lt;td&gt;Ronny&lt;/td&gt;
      &lt;td&gt;Stuard&lt;/td&gt;
      &lt;td&gt;ros@yahoo.com&lt;/td&gt;
      &lt;td&gt;0877223534&lt;/td&gt;
      &lt;td&gt;Test2&lt;/td&gt;
      &lt;td&gt;Test2&lt;/td&gt;
    &lt;/tr&gt;  
  &lt;/tbody&gt;   
&lt;/table&gt; 
</code></pre>

<p>I found this example and want to do something like</p>

<p><a href="https://css-tricks.com/examples/ResponsiveTables/responsive.php" rel="nofollow">sample responsive table</a></p>

<p>What I do not understand is how CSS code is written.
I need a short sample code CSS to turn my table to be like over there.Also if you know better examples to make a table responsive please put here</p>

<p>After all that is the best way to make a table responsive?</p>

<p>Thanks in advance!</p>
