Basic
NamePositionOfficeAgeStart dateSalary
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
NamePositionOfficeAgeStart dateSalary
<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.

NameColorTaste
AppleGreen and RedSweet and Tart
BananaYellowSweet and Mushy
MangoYellowish GreenTangy
OrangeOrangeSweet and Tangy
BlueberryBlueMild 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>