Dear Sir, I have these code

<html>
<head>
 <style type="text/css">

  html, body {
    height: 100%;    width: 100%;    margin: 0;    padding: 0;
}

body { 
overflow: hidden; 
 }

 #content {
 max-height: calc(100% - 280px);
 overflow-y: scroll;
 padding: 0px 5% 0px 5%  !important;
 margin-top: 10px !important;
border: 0px dotted #39F;
    }

</head>

<body >

  <div id="content">
 <table id="mytable" width='100%' align="center" cellpadding="3" cellspacing="3">

        <thead align="center" >

     <tr bgcolor="#3B5998" height="30"  style="color:white;font-weight:bold;" >

           <th width="10%">S.No</th>
           <th width="12%">Code</th>
           <th width="48%">Title of Account</th>
           <th width="15%">Debit</th>
           <th width="15%">Credit</th>
       </tr>

      </thead>
<tr>
.
.

The table is in scrollable div called content. when I move scrollbar then table header is disappeared and moves to upper side.

Is it possible to make the table header fixed?

Please help

Untitled.png

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.