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-stack class.

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>