Create scroll bar for HTML 5 Table With Fixed Header

Question

I want to create a scroll bar in HTML 5 for a table so that the header is fixed.

I've already created the scroll bar for the table, but the header moves as I scroll down. I've already tried using the block: fixed command in css, but it messes up the entire table structure.

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  /*box-shadow: inset 0 0 5px grey; */
  border-radius: 10px;
}

Possible duplicate of [HTML table with fixed headers?](https://stackoverflow.com/questions/673153/html-table-with-fixed-headers) — Heretic Monkey, Jun 19 '19 at 19:13
Also a possible duplicate of [css-only-scrollable-table-with-fixed-headers](https://stackoverflow.com/questions/11891065/css-only-scrollable-table-with-fixed-headers)? — Sweet_Pete, Jun 19 '19 at 19:20
Possible duplicate of [Table with fixed header and fixed column on pure css](https://stackoverflow.com/questions/15811653/table-with-fixed-header-and-fixed-column-on-pure-css) — NickCoder, Jun 20 '19 at 05:34

Kiran Mistry · Accepted Answer · 2019-07-29T08:40:59.360

This will solve ur problem

.table-responsive{
  height:400px;  
  overflow:scroll;
}
 thead tr:nth-child(1) th{
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="table-responsive">
    <table class="table table-hover" id="job-table">
      <thead>
        <tr class="text-center">
          <th scope="col">Applicant ▼</th>
          <th scope="col">State</th>
          <th scope="col">EIN</th>
          <th scope="col">DUNS</th>
          <th scope="col">Grant Type</th>
          <th scope="col">Status</th>
        </tr>
      </thead>
      
      
      <tbody class="text-center tableBody">
      
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
           <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
            
            <tr>
              <td>City of Charlottesville Public Schools</td>
              <td>Virginia</td>
              <td>33-1234888</td>
              <td>88-111-8235</td>
              <td>Discretionary</td>
              <td>Active</td>
            </tr>
      </tbody>
    </table>
  </div>

Create scroll bar for HTML 5 Table With Fixed Header

1 Answers1