Dear Sir, I have these code

 <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;


<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>


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