JSFiddle - React, Tailwind, and code Playground
by Anand Jee
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootply snippet - Bootstrap Bootstrap Scrolling Table with Fixed Header</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS code from Bootply.com editor -->
<style type="text/css">
.fixed-table .header-fixed {
position: absolute;
top: 0px;
z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */
border-bottom: 1px solid #d5d5d5;
border-left: 1px solid #d5d5d5;
border-top: 1px solid #d5d5d5;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.fixed-table{
display:block;
position:relative;
}
.fixed-table th{
padding: 8px;
line-height: 18px;
text-align: left;
}
.fixed-table .table-content{
display:block;
position: relative;
height: 300px; /*FIX THE HEIGHT YOU NEED*/
overflow-y: auto;
}
.fixed-table .header-copy{
position:absolute;
top:0;
left:0;
}
.fixed-table .header-copy th{
background-color:#fff;
}
</style>
</head>
<!-- HTML code from Bootply.com editor -->
<body >
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h4>
Your Table
</h4>
</div>
<div class="fixed-table">
<div class="table-content">
<table id="myTable" class="table table-fixed-header">
<thead>
<tr>
<th>User</th>
<th>Company</th>
<th>Branch</th>
<th>Main Module</th>
<th>Sub Module</th>
<th>Form</th>
...