Membuat Fixed Header Table (Responsive)

Pada postingan kali ini kita akan membuat bagian judul table tetap terlihat meskipun kita menscroll halaman website ke bawah.

Pertama mari kita buat struktur HTML dasarnya dan include plugin bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Fixed Header Table</title>

  </head>
  <body>
  

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

Berikutnya masukkan kodingan di bawah ke dalam tag <body> . . . </body>, pada bagian <tbody>, kalian boleh menambahkan jumlah row data sebanyak mungkin. *Disini saya hanya memberikan sedikit contoh row data

<div class="content-area">
  <div class="tableKu">
    <table class="responsive-table table 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>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>
      </tbody>
    </table>
  </div>
</div>

Sekarang kita tinggal menambahkan CSS nya agar bagian judul atau tag <thead> tetap terlihat jika kita scroll tabel ke bawah.

.tableKu {
  position: relative;
  z-index: 0;
  margin-top: 50px;
  padding-top: 30px;
}

table.responsive-table {
  display: table;
  /* required for table-layout to be used (not normally necessary; included for completeness) */
  table-layout: fixed;
  /* this keeps your columns with fixed with exactly the right width */
  width: 100%;
  /* table must have width set for fixed layout to work as expected */
  height: 100%;
}

table.responsive-table thead {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  line-height: 3em;
  background: #eee;
  table-layout: fixed;
  display: table;
}

table.responsive-table th {
  background: #eee;
}

table.responsive-table td {
  line-height: 2em;
}

table.responsive-table tr > td,
table.responsive-table th {
  text-align: left;
}

Sekarang kita sudah berhasil membuat sebuah table dengan judul tetap terlihat atau fixed.

Demo

Download

Kode Sumber : https://codepen.io/bobmarksie/pen/VadxoK