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.
Open your browser in mobile mode.
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>