Introduction:
Here I will explain how to make scrollable html table with fixed header using css with example or pure css scrollable html table with fixed header example. By using css properties we can easily implement scrollable table with fixed header.
Description:
In previous articles I explained jQuery fixed header on page scroll example, jQuery scrollable div with fixed header example, asp.net scrollable repeater with fixed header, Show div with vertical and horizontal scroll bars example, jQuery add multiple markers to google map from database, Show more link to shorten text and display it and many articles relating to html, css, jQuery, JavaScript and asp.net. Now I will explain how to make scrollable html table with fixed header using css with example.
In previous articles I explained jQuery fixed header on page scroll example, jQuery scrollable div with fixed header example, asp.net scrollable repeater with fixed header, Show div with vertical and horizontal scroll bars example, jQuery add multiple markers to google map from database, Show more link to shorten text and display it and many articles relating to html, css, jQuery, JavaScript and asp.net. Now I will explain how to make scrollable html table with fixed header using css with example.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrollable HTML table
with CSS Style</title>
<style type="text/css">
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #B34C00;
width:40%;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #000;
}
td, th {
border-bottom:1px solid #000;
background: #fff;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
</style>
</head>
<body>
<form id="form1">
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>User Name<div>User Name</div></th>
<th>Education<div>Education</div></th>
<th>Location<div>Location</div></th>
</tr>
</thead>
<tbody>
<tr>
<td>Suresh Dasari</td><td>B.Tech</td><td>Chennai</td>
</tr>
<tr>
<td>Rohini Dasari</td><td>Msc</td><td>Chennai</td>
</tr>
<tr>
<td>Madhav Sai</td><td>MBA</td><td>Nagpur</td>
</tr>
<tr>
<td>Praveen Kumar</td><td>B.Tech</td><td>Guntur</td>
</tr>
<tr>
<td>Mahendra Dasari</td><td>CA</td><td>Chennai</td>
</tr>
<tr>
<td>Nagaraju Dasari</td><td>MCA</td><td>USA</td>
</tr>
<tr>
<td>Sateesh Alavala</td><td>MD</td><td>Vizag</td>
</tr>
<tr>
<td>Sudheer</td><td>B.Tech</td><td>Kakinada</td>
</tr>
</tbody>
</table>
</div>
</section>
</form>
</body>
</html>
|
Demo
For live demo check below table it’s having fixed
header columns with scrollable body
|
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
1 comments :
Not working for many columns. And columns are not shift with horizontal bar.
And many more problems.
Note: Only a member of this blog may post a comment.