10+ Bootstrap Table Examples

This post contains a total of 10+ Hand-Picked Bootstrap Table Examples with Source Code. All these Tables are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

Bootstrap table examples

1. By Densityx

Made by Densityx. Minimalistic bootstrap table with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
body {
  font-family: "Roboto", sans-serif;
  background-color: #ecf0f1;
  font-size: 14px;
}

a {
  color: #3498db;
}
a:hover {
  text-decoration: none;
  color: #2980b9;
}

.active {
  background-color: #ecf0f1;
}

.panel {
  padding: 20px;
}

.container {
  margin-top: 20px;
}

.table > thead > tr > th {
  border-bottom: 1px solid #95a5a6;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  border-top: 1px solid #ecf0f1;
}

h3 {
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>
</head>
<body>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>

<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <h3>Anime</h3>
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="active">
                            <th>#</th>
                            <th>Anime</th>
                            <th>Cast time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td><a href="#">Naruto Shippuden</a></td>
                            <td>2 hours ago</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td><a href="#">One Punch Man</a></td>
                            <td>5 hours ago</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td><a href="#">Owari no Seraph</a></td>
                            <td>7 hours ago</td>
                        </tr>
                    </tbody>
                </table>
            </div><!-- end -->
            <div class="panel panel-default">
                <h3>Episode</h3>
                <table class="table table-hover table-bordered">
                    <thead>
                        <tr class="active">
<!--                             <th>#</th> -->
                            <th>Episodes #</th>
                            <th>Cast Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
<!--                             <td></td> -->
                            <td><a href="#">No Game No Life Episode 12</a></td>
                            <td>01-06-2016</td>
                        </tr>
                        <tr>
<!--                             <td>11</td> -->
                            <td><a href="#">No Game No Life Episode 11</a></td>
                            <td>01-06-2016</td>
                        </tr>
                        <tr>
<!--                             <td>10</td> -->
                            <td><a href="#">No Game No Life Episode 10</a></td>
                            <td>01-06-2016</td>
                        </tr>
                    </tbody>
                </table>
            </div><!-- end -->
        </div>
    </div>
</div>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
</body>
</html>

2. By Ellen Shih

Made by Ellen Shih. Bootstrap table with sorting button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.6.3/css/all.css'>
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/bootstrap-table.min.css'>
</head>
<body>
  <div class="container my-5">
  <table data-toggle="table">
    <thead>
      <tr>
        <th data-field="id" data-sortable="true">ID</th>
        <th data-field="name" data-sortable="true">Item Name</th>
        <th data-field="price" data-sortable="true">Item Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Orange</td>
        <td>102</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Guava</td>
        <td>8</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Grape</td>
        <td>59</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Apple</td>
        <td>45</td>
      </tr>
    </tbody>
  </table>
</div>
  
<script src='https://code.jquery.com/jquery-3.3.1.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'></script>
<script src='https://unpkg.com/[email protected]/dist/bootstrap-table.min.js'></script>

</body>
</html>

3. By Jason McCuen

Made by Jason McCuen. Table with Collapsible Section. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Assistant:400,700|Poppins:400,500,600,700" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css'>
  
<style>
@charset "UTF-8";
/* Colours */
/* fonts */
body {
  font-family: "Assistant", sans-serif;
}

h1, h2, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
}

h2 {
  font-weight: 700;
}

h3 {
  font-family: "Assistant", sans-serif;
  font-weight: 300;
  text-transform: none;
}

p {
  font-weight: 400;
}

strong {
  font-weight: 700;
}

/* Utilities */
.no-padding {
  padding: 0 !important;
}

/* width */
.container {
  width: 1080px;
}

/* Table Heading */
.pricing-top-heading th {
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
  width: 33%;
}

.pricing-bottom-heading th {
  padding: 0 2%;
  font-weight: 300;
}

.pricing-top-heading .free {
  background-color: #f26b42;
  border: 1px solid #f26b42;
}

.pricing-bottom-heading .free {
  background-color: #f28d6e;
  border: 1px solid #f28d6e;
}

.pricing-top-heading .basic {
  background-color: #58c5c7;
  border: 1px solid #58c5c7;
}

.pricing-bottom-heading .basic {
  background-color: #7fd1d2;
  border: 1px solid #7fd1d2;
}

.pricing-top-heading .pro {
  background-color: #a5c653;
  border: 1px solid #a5c653;
}

.pricing-bottom-heading .pro {
  background-color: #b9d17b;
  border: 1px solid #b9d17b;
}

.pricing-top-heading,
.pricing-bottom-heading {
  color: white;
  height: 90px;
}

table thead th {
  border: 0;
}

/* table */
table {
  width: 100%;
}

.collapsible-section-header {
  background-color: #e1e1e1;
}

.collapsible-section-header a {
  color: #363636;
  font-weight: 700;
  text-decoration: none;
}

.collapsible-section-header a:after {
  content: "โ–ผ";
  padding-left: 0.5em;
}

.collapsible-section-header a.collapsed:after {
  content: "โ–บ";
  padding-left: 0.5em;
}

tbody td {
  background-color: #ededed;
  border: 1px solid #d1d1d1;
  padding: 1.25rem;
}
</style>
</head>
<body>
  <div class="container">

  <div class="row">
    <table>
      <thead>
        <tr class="pricing-top-heading">
          <th class="free">FREE</th>
          <th class="basic">BASIC</th>
          <th class="pro">PRO</th>
        </tr>
        <tr class="pricing-bottom-heading small">
          <th class="free"><strong>Ideal for:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor pulvinar diam id interdum.</th>
          <th class="basic"><strong>Ideal for:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor pulvinar diam id interdum.</th>
          <th class="pro"><strong>Ideal for:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porttitor pulvinar diam id interdum.</th>
        </tr>
      </thead>
      <tbody>
        <!-- SECTION 1 -->
        <tr>
          <td class="collapsible-section-header" colspan="3">
            <a data-toggle="collapse" href="#collapse_section_one">Section 1</a>
          </td>
        </tr>
        <tr>
          <td class="no-padding" colspan="3">
            <div id="collapse_section_one" class="collapse in">
              <table style="width:100%">
                <tr>
                  <td>Free 1</td>
                  <td>Basic 1</td>
                  <td>Pro 1</td>
                </tr>
                <tr>
                  <td>Free 2</td>
                  <td>Basic 2</td>
                  <td>Pro 2</td>
                </tr>
                <tr>
                  <td>Free 3</td>
                  <td>Basic 3</td>
                  <td>Pro 3</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>

        <!-- SECTION 2 -->
        <tr>
          <td class="collapsible-section-header" colspan="3">
            <a data-toggle="collapse" href="#collapse_section_two">Section 2</a>
          </td>
        </tr>
        <tr>
          <td  class="no-padding" colspan="3">
            <div id="collapse_section_two" class="collapse in">
              <table style="width:100%">
                <tr>
                  <td>Free 4</td>
                  <td>Basic 4</td>
                  <td>Pro 4</td>
                </tr>
                <tr>
                  <td>Free 5</td>
                  <td>Basic 5</td>
                  <td>Pro 5</td>
                </tr>
                <tr>
                  <td>Free 6</td>
                  <td>Basic 6</td>
                  <td>Pro 6</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>

        <!-- SECTION 3 -->
        <tr>
          <td class="collapsible-section-header" colspan="3">
            <a data-toggle="collapse" href="#collapse_section_three">Section 3</a>
          </td>
        </tr>
        <tr>
          <td class="no-padding" colspan="3">
            <div id="collapse_section_three" class="collapse in">
              <table style="width:100%">
                <tr>
                  <td>Free 7</td>
                  <td>Basic 7</td>
                  <td>Pro 7</td>
                </tr>
                <tr>
                  <td>Free 8</td>
                  <td>Basic 8</td>
                  <td>Pro 8</td>
                </tr>
                <tr>
                  <td>Free 9</td>
                  <td>Basic 9</td>
                  <td>Pro 9</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>

      </tbody>
    </table>
  </div>

</div>
<!-- /.container -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js'></script>

</body>
</html>

4. By shubham jaiswal

Made by shubham jaiswal. Responsive Bootstrap table with search bar and pagination. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css'>
<link rel='stylesheet' href='https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css'>
  
<style>
td{
  word-break:break;
  
}
</style>
</head>
<body>
  <div class="container" style="margin-top:10px;">
<table id="example" class="table table-striped table-bordered" style="width:100%">
        <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>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>Haley Kennedy</td>
                <td>Senior Marketing Designer</td>
                <td>London</td>
                <td>43</td>
                <td>2012/12/18</td>
                <td>$313,500</td>
            </tr>
            <tr>
                <td>Tatyana Fitzpatrick</td>
                <td>Regional Director</td>
                <td>London</td>
                <td>19</td>
                <td>2010/03/17</td>
                <td>$385,750</td>
            </tr>
            <tr>
                <td>Michael Silva</td>
                <td>Marketing Designer</td>
                <td>London</td>
                <td>66</td>
                <td>2012/11/27</td>
                <td>$198,500</td>
            </tr>
            <tr>
                <td>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
            <tr>
                <td>Bradley Greer</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>41</td>
                <td>2012/10/13</td>
                <td>$132,000</td>
            </tr>
            <tr>
                <td>Dai Rios</td>
                <td>Personnel Lead</td>
                <td>Edinburgh</td>
                <td>35</td>
                <td>2012/09/26</td>
                <td>$217,500</td>
            </tr>
            <tr>
                <td>Jenette Caldwell</td>
                <td>Development Lead</td>
                <td>New York</td>
                <td>30</td>
                <td>2011/09/03</td>
                <td>$345,000</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Doris Wilder</td>
                <td>Sales Assistant</td>
                <td>Sidney</td>
                <td>23</td>
                <td>2010/09/20</td>
                <td>$85,600</td>
            </tr>
            <tr>
                <td>Angelica Ramos</td>
                <td>Chief Executive Officer (CEO)</td>
                <td>London</td>
                <td>47</td>
                <td>2009/10/09</td>
                <td>$1,200,000</td>
            </tr>
            <tr>
                <td>Gavin Joyce</td>
                <td>Developer</td>
                <td>Edinburgh</td>
                <td>42</td>
                <td>2010/12/22</td>
                <td>$92,575</td>
            </tr>
            <tr>
                <td>Jennifer Chang</td>
                <td>Regional Director</td>
                <td>Singapore</td>
                <td>28</td>
                <td>2010/11/14</td>
                <td>$357,650</td>
            </tr>
            <tr>
                <td>Brenden Wagner</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>28</td>
                <td>2011/06/07</td>
                <td>$206,850</td>
            </tr>
            <tr>
                <td>Fiona Green</td>
                <td>Chief Operating Officer (COO)</td>
                <td>San Francisco</td>
                <td>48</td>
                <td>2010/03/11</td>
                <td>$850,000</td>
            </tr>
            <tr>
                <td>Shou Itou</td>
                <td>Regional Marketing</td>
                <td>Tokyo</td>
                <td>20</td>
                <td>2011/08/14</td>
                <td>$163,000</td>
            </tr>
            <tr>
                <td>Michelle House</td>
                <td>Integration Specialist</td>
                <td>Sidney</td>
                <td>37</td>
                <td>2011/06/02</td>
                <td>$95,400</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Prescott Bartlett</td>
                <td>Technical Author</td>
                <td>London</td>
                <td>27</td>
                <td>2011/05/07</td>
                <td>$145,000</td>
            </tr>
            <tr>
                <td>Gavin Cortez</td>
                <td>Team Leader</td>
                <td>San Francisco</td>
                <td>22</td>
                <td>2008/10/26</td>
                <td>$235,500</td>
            </tr>
            <tr>
                <td>Martena Mccray</td>
                <td>Post-Sales support</td>
                <td>Edinburgh</td>
                <td>46</td>
                <td>2011/03/09</td>
                <td>$324,050</td>
            </tr>
            <tr>
                <td>Unity Butler</td>
                <td>Marketing Designer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/12/09</td>
                <td>$85,675</td>
            </tr>
            <tr>
                <td>Howard Hatfield</td>
                <td>Office Manager</td>
                <td>San Francisco</td>
                <td>51</td>
                <td>2008/12/16</td>
                <td>$164,500</td>
            </tr>
            <tr>
                <td>Hope Fuentes</td>
                <td>Secretary</td>
                <td>San Francisco</td>
                <td>41</td>
                <td>2010/02/12</td>
                <td>$109,850</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jackson Bradshaw</td>
                <td>Director</td>
                <td>New York</td>
                <td>65</td>
                <td>2008/09/26</td>
                <td>$645,750</td>
            </tr>
            <tr>
                <td>Olivia Liang</td>
                <td>Support Engineer</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2011/02/03</td>
                <td>$234,500</td>
            </tr>
            <tr>
                <td>Bruno Nash</td>
                <td>Software Engineer</td>
                <td>London</td>
                <td>38</td>
                <td>2011/05/03</td>
                <td>$163,500</td>
            </tr>
            <tr>
                <td>Sakura Yamamoto</td>
                <td>Support Engineer</td>
                <td>Tokyo</td>
                <td>37</td>
                <td>2009/08/19</td>
                <td>$139,575</td>
            </tr>
            <tr>
                <td>Thor Walton</td>
                <td>Developer</td>
                <td>New York</td>
                <td>61</td>
                <td>2013/08/11</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Finn Camacho</td>
                <td>Support Engineer</td>
                <td>San Francisco</td>
                <td>47</td>
                <td>2009/07/07</td>
                <td>$87,500</td>
            </tr>
            <tr>
                <td>Serge Baldwin</td>
                <td>Data Coordinator</td>
                <td>Singapore</td>
                <td>64</td>
                <td>2012/04/09</td>
                <td>$138,575</td>
            </tr>
            <tr>
                <td>Zenaida Frank</td>
                <td>Software Engineer</td>
                <td>New York</td>
                <td>63</td>
                <td>2010/01/04</td>
                <td>$125,250</td>
            </tr>
            <tr>
                <td>Zorita Serrano</td>
                <td>Software Engineer</td>
                <td>San Francisco</td>
                <td>56</td>
                <td>2012/06/01</td>
                <td>$115,000</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
            </tr>
            <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>
<script src='https://code.jquery.com/jquery-3.3.1.js'></script>
<script src='https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js'></script>
<script src='https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js'></script>
      <script>
$(document).ready(function () {
  $('#example').DataTable();
});
    </script>
</body>
</html>

5. By Taylor Hobbs

Made by Taylor Hobbs. Bootstrap table with two tables, one is regular and one has click to expand effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css'>
  
<style>
.faux-table-header {
    border-bottom: 1px solid #dddddd;
}
.faux-table {
    border-top: 1px solid #EAE9E9;
}

.faux-table:nth-child(even) {
    background: #f9f9f9;
}

.payment-rows:nth-child(even) {
    background: #fcfcfc;
}

.align-amount {
    margin-left: 90px;
}

.more-info:nth-child(even) {
    background: #f9f9f9;
}
.item {
    margin-top: 7px;
}
</style>
</head>
<body>
  <h1 class="text-center">Table made with divs, click to expand</h1>
<hr>
<div class="container">
  <div class="row">
    <div class="col-sm-offset-2 col-lg-9">
      <div class="col-lg-12">
      <div class="row faux-table-header">
        <div class="col-xs-3">
          <label for="row-1">Row 1</label>
        </div>
        <div class="col-xs-3">
          <label for="row-2">Row 2</label>
        </div>
        <div class="col-xs-3">
          <label for="row-3">Row 3</label>
        </div>
        <div class="col-xs-3">
          <label for="row-4">Row 4</label>
        </div>
      </div>
    </div>
    <div class="col-lg-12 show-info faux-table">
      <div class="row">
        <div class="col-xs-3">
          <p class="item">Item 1</p>
        </div>
        <div class="col-xs-3">
          <p class="item">Item 2</p>
        </div>
        <div class="col-xs-3">
          <p class="item">Item 3</p>
        </div>
        <div class="col-xs-3">
          <p class="item">Item 4</p>
        </div>
      </div>
            <div class="more-info"  style="display: none;">
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-6">
              <label for="additional-info-1">Additional Info 1:</label>
              <p>This is more information</p>
            </div>
            <div class="col-md-6">
              <label for="additional-info-2">Additional Info 2:</label>
              <p>This is more information</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12">
              <label for="additional-info-3">Additional Info 3:</label>
              <p>This is more information that stretches across the bottom of both divs above.</p>
            </div>
          </div>
         </div> 
          <div class="col-md-6">
           <label for="right-side">Right Side:</label>
           <p>This is a whole other side for information.</p>
      </div>
   </div>
    </div>
    <div class="col-lg-12 show-info faux-table">
      <div class="row">
        <div class="col-xs-3">
          <p class="item">Item 1</p>
        </div>
        <div class="col-xs-3">
          <p class="item">Item 2</p>
        </div>
        <div class="col-xs-3">
          <p class="item">Item 3</p>
        </div>
        <div class="col-xs-3">
          <p class="item">Item 4</p>
        </div>
      </div>
      <div class="more-info"  style="display: none;">
        <div class="col-md-6">
          <div class="row">
            <div class="col-md-6">
              <label for="additional-info-1">Additional Info 1:</label>
              <p>This is more information</p>
            </div>
            <div class="col-md-6">
              <label for="additional-info-2">Additional Info 2:</label>
              <p>This is more information</p>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12">
              <label for="additional-info-3">Additional Info 3:</label>
              <p>This is more information that stretches across the bottom of both divs above.</p>
            </div>
          </div>
         </div> 

      <div class="col-md-6">
       <label for="right-side">Right Side:</label>
        <p>This is a whole other side for information.</p>
      </div>
      </div>
      </div>
      </div> 
  </div>
  <h1 class="text-center">Regular Table</h1>
<hr>
  <div class="row">
    <div class="col-sm-offset-2 col-sm-9">
   <table class="table table-striped">
    <thead>
      <th>Row 1</th>
      <th>Row 2</th>
      <th>Row 3</th>
      <th>Row 4</th>
    </thead>
    <tbody>
        <tr>
          <td>Item 1</td>
          <td>Item 2</td>
          <td>Item 3</td>
          <td>Item 4</td>
        </tr>
        <tr>
          <td>Item 1</td>
          <td>Item 2</td>
          <td>Item 3</td>
          <td>Item 4</td>
        </tr>
    </tbody>
  </table>
    </div>
  </div>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('.show-info').click(function () {
  $(this).find('.more-info').slideToggle('slow');
});
    </script>
</body>
</html>

6. By Ananda Projapati

Made by Ananda Projapati. Bootstrap table with fixed header. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
.table-fixed {
    background-color: #fbfbfb;
    width: 100%;
}
.table-fixed tbody {
    height: 200px;
    overflow-y: auto;
    width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
    display: block;
}
.table-fixed tbody td {
    float: left;
}
.table-fixed thead tr th {
    background-color:#159bd0;
    border-color:#0881b1;
    float: left;
	  color:#fff;
}
.read_article{
	text-align:center;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
    <table class="table table-fixed">
      <thead>
        <tr>
          <th class="col-xs-2">Id</th>
          <th class="col-xs-5">Name</th>
          <th class="col-xs-5">Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="col-xs-2">1</td>
          <td class="col-xs-5">Mark</td>
          <td class="col-xs-5">@mdo</td>
        </tr>
        <tr>
          <td class="col-xs-2">2</td>
          <td class="col-xs-5">Jacob</td>
          <td class="col-xs-5">@fat</td>
        </tr>
        <tr>
          <td class="col-xs-2">3</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">4</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">5</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">6</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">7</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
        <tr>
          <td class="col-xs-2">8</td>
          <td class="col-xs-5">Larry</td>
          <td class="col-xs-5">@twitter</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<div class="read_article"><a href="http://www.designtheway.com/fixed-header-on-scroll/" target="_blank">Read full article</a></div>
</body>
</html>

7. By Internet Praktikum

Made by Internet Praktikum. Simple table. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
</head>
<body>
  <div class="container">
  <div class="row">
    <h1 class="text-center">Bootstrap Table Demo</h1>
  </div>
  <div class="row">
    <div class="col-sd-8 col-md-offset-2">
      <table class="table table-hover table-striped table-condensed table-bordered">
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>eMail</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Mickey</td>
            <td>Mouse</td>
             <td><a>hi</a></p>
          </tr>
          <tr>
            <td>Donald</td>
            <td>Duck</td>
             <td><a>hi</a></p>
          </tr>
          <tr>
            <td>Minnie</td>
            <td>Mouse</td>
            <td><a>hi</a></p>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</html>

8. By RahulDhiman

Made by RahulDhiman. Source

bootstrap table by rahuldhiman
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <title></title>

<style>
h1{
            font-size:30px;
        }
        /*Table Style One*/
        .table .table-header{
            background:#FEC107;
            color:#333;
        }
        .table .table-header .cell{
            padding:20px;
        }
        @media screen and (max-width: 640px){
            table {
                overflow-x: auto;
                display: block;
            }
            .table .table-header .cell{
                padding:20px 5px;
            }
        }
</style>
</head>
<body>
<div class="container">
    <h1>Bootstrap Table</h1>
    <h2>Style 1</h2>
    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <tr class="table-header">
                    <th class="cell">S.no</th>
                    <th class="cell">Name</th>
                    <th class="cell">Username</th>
                    <th class="cell">Address</th>
                    <th class="cell">Email Id</th>
                    <th class="cell">Phone No.</th>
                </tr>
                <tr  class="active">
                    <td>1</td>
                    <td>Smith</td>
                    <td>Smith Mark</td>
                    <td>#67/B Maxico Usa</td>
                    <td><a>Hi</a></td>
                    <td>+3755438764</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Smith Mark</td>
                    <td>Smith</td>
                    <td>#67/A England</td>
                    <td><a>Hi</a></td>
                    <td>+376768764</td>
                </tr>
                <tr  class="active">
                    <td>3</td>
                    <td>Willson</td>
                    <td>Will</td>
                    <td>#3657/34 India New Delhi</td>
                    <td><a>Hi</a></td>
                    <td>+372385694</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>Jacob</td>
                    <td>Jacob Thornton</td>
                    <td>#67/B Maxico Usa</td>
                    <td><a>Hi</a></td>
                    <td>+3755438764</td>
                </tr>
                <tr  class="active">
                    <td>5</td>
                    <td>Larry</td>
                    <td>Larry  Bird</td>
                    <td>#67/B  USA</td>
                    <td><a>Hi</a></td>
                    <td>+6675438764</td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>

9. By Paul

Made by Paul. Basic Responsive Bootstrap table. Source

bootstrap table by paul
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
@media screen and (max-width: 480px) {
  .table-collapse-phone {
    display: block;
  }
  .table-collapse-phone caption,
.table-collapse-phone tbody,
.table-collapse-phone tr,
.table-collapse-phone th,
.table-collapse-phone td {
    display: block;
  }
  .table-collapse-phone thead,
.table-collapse-phone tfoot {
    display: none;
  }
  .table-collapse-phone tr {
    border-top: 1px solid #ddd;
  }
  .table-collapse-phone tr:first-child {
    border: 0;
  }
  .table-collapse-phone > tbody > tr > th:first-child,
.table-collapse-phone > tbody > tr > td:first-child {
    border: 0;
  }
  .table-collapse-phone .has-label[data-label] {
    position: relative;
    padding-left: 50% !important;
  }
  .table-collapse-phone .has-label[data-label]:before {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px;
    content: attr(data-label);
    font-weight: bold;
  }
}
@media screen and (max-width: 768px) {
  .table-collapse-tablet {
    display: block;
  }
  .table-collapse-tablet caption,
.table-collapse-tablet tbody,
.table-collapse-tablet tr,
.table-collapse-tablet th,
.table-collapse-tablet td {
    display: block;
  }
  .table-collapse-tablet thead,
.table-collapse-tablet tfoot {
    display: none;
  }
  .table-collapse-tablet tr {
    border-top: 1px solid #ddd;
  }
  .table-collapse-tablet tr:first-child {
    border: 0;
  }
  .table-collapse-tablet > tbody > tr > th:first-child,
.table-collapse-tablet > tbody > tr > td:first-child {
    border: 0;
  }
  .table-collapse-tablet .has-label[data-label] {
    position: relative;
    padding-left: 50% !important;
  }
  .table-collapse-tablet .has-label[data-label]:before {
    position: absolute;
    top: 0;
    left: 0;
    padding: 8px;
    content: attr(data-label);
    font-weight: bold;
  }
}
</style>
</head>
<body>
  <div class="container">

<table class="table table-collapse-phone">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>

<table class="table table-collapse-tablet">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
</div>
  
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

</body>
</html>

10. By Naved khan

Made by Naved khan. Source

bootstrap table by naved khan
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
	#no-more-tables table, 
	#no-more-tables thead, 
	#no-more-tables tbody, 
	#no-more-tables th, 
	#no-more-tables td, 
	#no-more-tables tr { 
		display: block; 
	}
 
	/* Hide table headers (but not display: none;, for accessibility) */
	#no-more-tables thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
 
	#no-more-tables tr { border: 1px solid #ccc; }
 
	#no-more-tables td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
		white-space: normal;
		text-align:left;
	}
 
	#no-more-tables td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align:left;
		font-weight: bold;
	}
 
	/*
	Label the data
	*/
	#no-more-tables td:before { content: attr(data-title); }
}
</style>
</head>
<body>
  <div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">
                No more tables.
            </h1>
            <h3 class="text-center">
                Resize the browser screen to see how the table changes
            </h3>
        </div>
        <div id="no-more-tables">
            <table class="col-md-12 table-bordered table-striped table-condensed cf">
        		<thead class="cf">
        			<tr>
        				<th>Code</th>
        				<th>Company</th>
        				<th class="numeric">Price</th>
        				<th class="numeric">Change</th>
        				<th class="numeric">Change %</th>
        				<th class="numeric">Open</th>
        				<th class="numeric">High</th>
        				<th class="numeric">Low</th>
        				<th class="numeric">Volume</th>
        			</tr>
        		</thead>
        		<tbody>
        			<tr>
        				<td data-title="Code">AAC</td>
        				<td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
        				<td data-title="Price" class="numeric">$1.38</td>
        				<td data-title="Change" class="numeric">-0.01</td>
        				<td data-title="Change %" class="numeric">-0.36%</td>
        				<td data-title="Open" class="numeric">$1.39</td>
        				<td data-title="High" class="numeric">$1.39</td>
        				<td data-title="Low" class="numeric">$1.38</td>
        				<td data-title="Volume" class="numeric">9,395</td>
        			</tr>
        			<tr>
        				<td data-title="Code">AAD</td>
        				<td data-title="Company">ARDENT LEISURE GROUP</td>
        				<td data-title="Price" class="numeric">$1.15</td>
        				<td data-title="Change" class="numeric">+0.02</td>
        				<td data-title="Change %" class="numeric">1.32%</td>
        				<td data-title="Open" class="numeric">$1.14</td>
        				<td data-title="High" class="numeric">$1.15</td>
        				<td data-title="Low" class="numeric">$1.13</td>
        				<td data-title="Volume" class="numeric">56,431</td>
        			</tr>
        			<tr>
        				<td data-title="Code">AAX</td>
        				<td data-title="Company">AUSENCO LIMITED</td>
        				<td data-title="Price" class="numeric">$4.00</td>
        				<td data-title="Change" class="numeric">-0.04</td>
        				<td data-title="Change %" class="numeric">-0.99%</td>
        				<td data-title="Open" class="numeric">$4.01</td>
        				<td data-title="High" class="numeric">$4.05</td>
        				<td data-title="Low" class="numeric">$4.00</td>
        				<td data-title="Volume" class="numeric">90,641</td>
        			</tr>
        			<tr>
        				<td data-title="Code">ABC</td>
        				<td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
        				<td data-title="Price" class="numeric">$3.00</td>
        				<td data-title="Change" class="numeric">+0.06</td>
        				<td data-title="Change %" class="numeric">2.04%</td>
        				<td data-title="Open" class="numeric">$2.98</td>
        				<td data-title="High" class="numeric">$3.00</td>
        				<td data-title="Low" class="numeric">$2.96</td>
        				<td data-title="Volume" class="numeric">862,518</td>
        			</tr>
        			<tr>
        				<td data-title="Code">ABP</td>
        				<td data-title="Company">ABACUS PROPERTY GROUP</td>
        				<td data-title="Price" class="numeric">$1.91</td>
        				<td data-title="Change" class="numeric">0.00</td>
        				<td data-title="Change %" class="numeric">0.00%</td>
        				<td data-title="Open" class="numeric">$1.92</td>
        				<td data-title="High" class="numeric">$1.93</td>
        				<td data-title="Low" class="numeric">$1.90</td>
        				<td data-title="Volume" class="numeric">595,701</td>
        			</tr>
        			<tr>
        				<td data-title="Code">ABY</td>
        				<td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>
        				<td data-title="Price" class="numeric">$0.77</td>
        				<td data-title="Change" class="numeric">+0.02</td>
        				<td data-title="Change %" class="numeric">2.00%</td>
        				<td data-title="Open" class="numeric">$0.76</td>
        				<td data-title="High" class="numeric">$0.77</td>
        				<td data-title="Low" class="numeric">$0.76</td>
        				<td data-title="Volume" class="numeric">54,567</td>
        			</tr>
        			<tr>
        				<td data-title="Code">ACR</td>
        				<td data-title="Company">ACRUX LIMITED</td>
        				<td data-title="Price" class="numeric">$3.71</td>
        				<td data-title="Change" class="numeric">+0.01</td>
        				<td data-title="Change %" class="numeric">0.14%</td>
        				<td data-title="Open" class="numeric">$3.70</td>
        				<td data-title="High" class="numeric">$3.72</td>
        				<td data-title="Low" class="numeric">$3.68</td>
        				<td data-title="Volume" class="numeric">191,373</td>
        			</tr>
        			<tr>
        				<td data-title="Code">ADU</td>
        				<td data-title="Company">ADAMUS RESOURCES LIMITED</td>
        				<td data-title="Price" class="numeric">$0.72</td>
        				<td data-title="Change" class="numeric">0.00</td>
        				<td data-title="Change %" class="numeric">0.00%</td>
        				<td data-title="Open" class="numeric">$0.73</td>
        				<td data-title="High" class="numeric">$0.74</td>
        				<td data-title="Low" class="numeric">$0.72</td>
        				<td data-title="Volume" class="numeric">8,602,291</td>
        			</tr>
        			<tr>
        				<td data-title="Code">AGG</td>
        				<td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>
        				<td data-title="Price" class="numeric">$7.81</td>
        				<td data-title="Change" class="numeric">-0.22</td>
        				<td data-title="Change %" class="numeric">-2.74%</td>
        				<td data-title="Open" class="numeric">$7.82</td>
        				<td data-title="High" class="numeric">$7.82</td>
        				<td data-title="Low" class="numeric">$7.81</td>
        				<td data-title="Volume" class="numeric">148</td>
        			</tr>
        			<tr>
        				<td data-title="Code">AGK</td>
        				<td data-title="Company">AGL ENERGY LIMITED</td>
        				<td data-title="Price" class="numeric">$13.82</td>
        				<td data-title="Change" class="numeric">+0.02</td>
        				<td data-title="Change %" class="numeric">0.14%</td>
        				<td data-title="Open" class="numeric">$13.83</td>
        				<td data-title="High" class="numeric">$13.83</td>
        				<td data-title="Low" class="numeric">$13.67</td>
        				<td data-title="Volume" class="numeric">846,403</td>
        			</tr>
        			<tr>
        				<td data-title="Code">AGO</td>
        				<td data-title="Company">ATLAS IRON LIMITED</td>
        				<td data-title="Price" class="numeric">$3.17</td>
        				<td data-title="Change" class="numeric">-0.02</td>
        				<td data-title="Change %" class="numeric">-0.47%</td>
        				<td data-title="Open" class="numeric">$3.11</td>
        				<td data-title="High" class="numeric">$3.22</td>
        				<td data-title="Low" class="numeric">$3.10</td>
        				<td data-title="Volume" class="numeric">5,416,303</td>
        			</tr>
        		</tbody>
        	</table>
        </div>
    </div>
    <div class="row">
        <p class="bg-success" style="padding:10px;margin-top:20px"><small><a href="http://elvery.net/demo/responsive-tables/#no-more-tables" target="_blank">Link</a> to original article</small></p>
    </div>
</div> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

</body>
</html>

11. By geng wang

Made by geng wang. Bootstrap table with hover effect. Source

bootstrap table by geng wang
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
  
<style>
.note {
  color: #777;
  font-size: 0.85em;
}
</style>
</head>
<body>
  <div class="bs-example container" data-example-id="striped-table">
  <table class="table table-striped table-bordered table-hover">
    <caption>Bootstrap Table CSS Demo</caption>
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Larry</td>
        <td>the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
    <tfoot>
    <tr class="note"><th>Source</th><td colspan=3><a href="https://getbootstrap.com/css/#tables">BootStrap documentation</a></td></tr>
    </tfoot>
  </table>
</div>
</body>
</html>