title: How to make fixed header table inside scrollable div?
body: <p>I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.</p>
  
  <pre><code>&lt;div id="table-wrapper"&gt;
      &lt;div id="table-scroll"&gt;
          &lt;table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Order ID&lt;/th&gt;
                      &lt;th&gt;Order Date&lt;/th&gt;
                      &lt;th&gt;Status&lt;/th&gt;
                      &lt;th&gt;Vol Number&lt;/th&gt;
                      &lt;th&gt;Bonus Paid&lt;/th&gt;
                      &lt;th&gt;Reason for no Bonus&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;%=snd.getOrderId()%&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;%=snd.getDateCaptured()%&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;%=snd.getOrderStatus()%&gt;&lt;/td&gt;
                      &lt;td&gt;Data Not Available&lt;/td&gt;
                      &lt;td&gt;Data Not Available&lt;/td&gt;
                      &lt;td&gt;Data Not Available&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Below is my CSS, which I am using for the above div:</p>
  
  <pre><code>#table-wrapper {
      position:relative;
  }
  
  #table-scroll {
      height:250px;
      overflow:auto;  
      margin-top:20px;
  }
  
  #table-wrapper table {
      width:100%;
  }
  
  #table-wrapper table * {
      background:white;
      color:black;
  }
  
  #table-wrapper table thead th .text {
      position:absolute;   
      top:-20px;
      z-index:2;
      height:20px;
      width:35%;
      border:1px solid red;
  }
  </code></pre>