HTML Table with Fixed Header and Scrollable Body

HTML Table with Fixed Header and Scrollable Body
  • Datatables provides HTML tables with various features such as searching the data among table rows or showing the number of table rows per page so that the data can be loaded quickly.
  • It also provides the facility to sort the data in ascending or descending order just by clicking on the individual header fields of the HTML tables.
  • It also helps us to set the scrollbar to move the table data horizontally.
  • It also helps us to set the scrollbar to move the table data vertically.

Steps to create an HTML table with fixed header and scrollable body using Datatables

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/fh-3.1.8/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/fh-3.1.8/datatables.min.js"></script>
<script>
$('.cell-border').DataTable( {
"paging": true,
"fixedHeader": true,
"bDestroy": true,
"scrollY": '200px',
"sScrollX": "100%",
"scrollCollapse": true,
"responsive": true
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>HTML table with Fixed Header</title>
<link rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/fh-3.1.8/datatables.min.css"/>
</head>
<body>
<h3>HTML table with fixed header and scrollable body</h3>
<div style="width:80%;">
<table id="" class="cell-border" style="width:100%;">
<thead>
<tr>
<th scope="col">Sl</th>
<th scope="col">Name</th>
<th scope="col">Phone Number</th>
<th scope="col">Age</th>
<th scope="col">Department</th>
<th scope="col">Designation</th>
<th scope="col">Company Name</th>
<th scope="col">Salary</th>
<th scope="col">Date of Joining</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Biswa</td>
<td>5434434545</td>
<td>28</td>
<td>IT</td>
<td>B.Tech</td>
<td>TCS</td>
<td>15000</td>
<td>24-08-2022</td>
</tr>
<tr>
<td>2</td>
<td>Manoj</td>
<td>5434434548</td>
<td>29</td>
<td>Accounts</td>
<td>B.Com</td>
<td>Wipro</td>
<td>45000</td>
<td>25-08-2022</td>
</tr>
<tr>
<td>3</td>
<td>Bimal</td>
<td>5434434549</td>
<td>30</td>
<td>Marketing</td>
<td>BA</td>
<td>Infosis</td>
<td>50000</td>
<td>26-08-2022</td>
</tr>
<tr>
<td>4</td>
<td>Biju</td>
<td>5434434545</td>
<td>31</td>
<td>Sales</td>
<td>MA</td>
<td>IBM</td>
<td>55000</td>
<td>27-08-2022</td>
</tr>
<tr>
<td>5</td>
<td>Robin</td>
<td>5434434542</td>
<td>32</td>
<td>Digital Marketing</td>
<td>BA</td>
<td>Web Infotech</td>
<td>60000</td>
<td>28-08-2022</td>
</tr>
<tr>
<td>6</td>
<td>Abhisekh</td>
<td>5434434540</td>
<td>33</td>
<td>Management</td>
<td>BSC</td>
<td>Royal Global University</td>
<td>65000</td>
<td>29-08-2022</td>
</tr>
<tr>
<td>7</td>
<td>Raj</td>
<td>5434434544</td>
<td>34</td>
<td>Construction</td>
<td>BA</td>
<td>Tata Cancer Hospital</td>
<td>70000</td>
<td>30-08-2022</td>
</tr>
<tr>
<td>8</td>
<td>Raj Singh</td>
<td>5434434547</td>
<td>35</td>
<td>Sales & Marketing</td>
<td>B.Tech</td>
<td>HDFC Bank</td>
<td>75000</td>
<td>31-08-2022</td>
</tr>
<tr>
<td>9</td>
<td>Rupam</td>
<td>5434434543</td>
<td>36</td>
<td>Accounts</td>
<td>B.Com</td>
<td>GNRC Hospital</td>
<td>80000</td>
<td>1-09-2022</td>
</tr>
<tr>
<td>10</td>
<td>Rinku</td>
<td>5434434542</td>
<td>37</td>
<td>Customer Care</td>
<td>BA</td>
<td>Reliance</td>
<td>25000</td>
<td>02-09-2022</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.23/fh-3.1.8/datatables.min.js"></script>
<script>
$('.cell-border').DataTable( {
"paging": true,
"fixedHeader": true,
"bDestroy": true,
"scrollY": '200px',
"sScrollX": "100%",
"scrollCollapse": true,
"responsive": true
});
</script>
</body>
</html>
  • “paging”: true, will enable the pagination which means a number of table rows per page to be included.
  • “fixedHeader”: true, will fix the header position of the table which means you can not move the header except the table data.
  • “scrollY”: ‘200px’, will set the vertical width of the scrolling element.
  • “sScrollX”: “100%”, will enable the horizontal scrollbar to the table.
  • “responsive”: true will make the table responsive.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bipsmedium

Bipsmedium

25 Followers

Hi, This is Biplab and I am web developer well versed in PHP and other open source technologies. I am here to share my experience with the community.