content logo

Bootstrap Tables:

Bootstrap Table with Fixed Header

Tables are a great design pattern to display excessive amounts of information in rows and columns. This makes tables perfect for comparing data and analysing categorical objects. Table layouts have been used since long before the digital era and with the start of web, they came along with us. Even though the basic designs of tables still have the same functionality as the graphic heavy designs, it is not as pleasing aesthetically. Depending on your taste and desired visual design, creating a table for your website could be really difficult and time-consuming. Due to this, many prefer to use a template and customize it to make it unique to their own website.

In this post, we are sharing a Bootstrap sortable table code, perfect for showing a set of data to your visitors. It has a really simple and minimalistic design but will certainly get the job done. If you are looking for a Bootstrap table pagination and Bootstrap table export features, this code is the one for you. It professionally designed so all the necessary SEO features are also included inside the code. This means you will instantly get a better SEO rank by using this Bootstrap table search template.

#Bootstrap Sortable Table #Bootstrap Table Pagination #Bootstrap Table Search #Bootstrap Table Export

<!-- This script got from www.frontendfreecode.com -->
<div class="container">
  <h1 class="m-b-2">
  CSS Only - Fixed Header Table.
</h1>
<div class="table-wrapper">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">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>
    <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>
    <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>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
.table-wrapper {
    height: 300px;
    overflow-y: auto;
}

th {
    position: -webkit-sticky;
    position: sticky;
    /*Chrome seems to have weird text bleed from top bug.*/
    top: -1px;
    background: #f2f2f2;
}
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>
<style>
.table-wrapper {
    height: 300px;
    overflow-y: auto;
}

th {
    position: -webkit-sticky;
    position: sticky;
    /*Chrome seems to have weird text bleed from top bug.*/
    top: -1px;
    background: #f2f2f2;
}
</style>

</head>
<body>
<div class="container">
  <h1 class="m-b-2">
  CSS Only - Fixed Header Table.
</h1>
<div class="table-wrapper">
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">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>
    <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>
    <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>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>

</body>
</html>
Preview