Responsive Tables

Basic
Name Position Office Age Start date Salary
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Hermione Butler Regional Director London 47 2011/03/21 $356,250
Lael Greer Systems Administrator London 21 2009/02/27 $103,500
Jonas Alexander Developer San Francisco 30 2010/07/14 $86,500
Shad Decker Regional Director Edinburgh 51 2008/11/13 $183,000
Michael Bruce Javascript Developer Singapore 29 2011/06/27 $183,000
Donna Snider Customer Support New York 27 2011/01/25 $112,000
Name Position Office Age Start date Salary 
<div class="table-responsive"> <!-- Required for Responsive -->  <table class="table table-striped table-bordered">    <thead>      <tr>        <th>Name</th>        <th>Position</th>        <th>Office</th>        <th>Age</th>        <th>Start date</th>        <th>Salary</th>      </tr>    </thead>    <tbody>      <tr>        <td>Cara Stevens</td>        <td>Sales Assistant</td>        <td>New York</td>        <td>46</td>        <td>2011/12/06</td>        <td>$145,600</td>      </tr>      <tr>        <td>Hermione Butler</td>        <td>Regional Director</td>        <td>London</td>        <td>47</td>        <td>2011/03/21</td>        <td>$356,250</td>      </tr>      <tr>        <td>Lael Greer</td>        <td>Systems Administrator</td>        <td>London</td>        <td>21</td>        <td>2009/02/27</td>        <td>$103,500</td>      </tr>      <tr>        <td>Jonas Alexander</td>        <td>Developer</td>        <td>San Francisco</td>        <td>30</td>        <td>2010/07/14</td>        <td>$86,500</td>      </tr>      <tr>        <td>Shad Decker</td>        <td>Regional Director</td>        <td>Edinburgh</td>        <td>51</td>        <td>2008/11/13</td>        <td>$183,000</td>      </tr>      <tr>        <td>Michael Bruce</td>        <td>Javascript Developer</td>        <td>Singapore</td>        <td>29</td>        <td>2011/06/27</td>        <td>$183,000</td>      </tr>      <tr>        <td>Donna Snider</td>        <td>Customer Support</td>        <td>New York</td>        <td>27</td>        <td>2011/01/25</td>        <td>$112,000</td>      </tr>    </tbody>    <tfoot>      <tr>        <th>Name</th>        <th>Position</th>        <th>Office</th>        <th>Age</th>        <th>Start date</th>        <th>Salary</th>      </tr>    </tfoot>  </table></div>
Javascript Table

For mobile-compatible tables, add the .table-responsive-stackclass.

Name Color Taste
Apple Green and Red Sweet and Tart
Banana Yellow Sweet and Mushy
Mango Yellowish Green Tangy
Orange Orange Sweet and Tangy
Blueberry Blue Mild Sweetness 
<table class="table table-bordered table-striped table-responsive-stack">  <thead class="thead-dark">    <tr>      <th>Name</th>      <th>Color</th>      <th>Taste</th>    </tr>  </thead>  <tbody>    <tr>      <td>Apple</td>      <td>Green and Red</td>      <td>Sweet and Tart</td>    </tr>    <tr>      <td>Banana</td>      <td>Yellow</td>      <td>Sweet and Mushy</td>    </tr>    <tr>      <td>Mango</td>      <td>Yellowish Green</td>      <td>Tangy</td>    </tr>    <tr>      <td>Orange</td>      <td>Orange</td>      <td>Sweet and Tangy</td>    </tr>    <tr>      <td>Blueberry</td>      <td>Blue</td>      <td>Mild Sweetness</td>    </tr>  </tbody></table>