title: How to fix vertical scrollbar inside div
body: <p>There are many answers given in stackoverflow to my question. But what is needed is can my existing code be modified or can any jQuery plugin be used. </p>
  
  <p>My final result should be like <a href="http://www.tablefixedheader.com/fullpagedemo/" rel="nofollow">final Result with vertical overflow and table header fixed </a></p>
  
  <p>For displaying tables i'm using HTML code </p>
  
  <pre><code>&lt;div id="tables" style="width: 100%"&gt;
   &lt;div id="divs1" style="width: 100%;margin-right:10px; float: left"&gt;
    &lt;div style="overflow-x: auto;overflow-y: auto;border-bottom: medium none; border-left: medium none; border-top: medium none; font-weight: normal; border-right: medium none; height: 100%; width: 100%;" &gt;
     &lt;div style="margin-right: 0px;"&gt; 
  &lt;table style="width: 900px;" class="div2"&gt;
   &lt;colgroup&gt;
    &lt;col style="width: 115px"&gt;
    &lt;col style="width: 180px"&gt;
    &lt;col style="width: 180px"&gt;
    &lt;col style="width: 180px"&gt;
   &lt;/colgroup&gt;
   &lt;thead&gt;
    &lt;tr id=rowHeader class=ui-sortable&gt;
     &lt;th&gt;&amp;nbsp;&lt;/th&gt;
     &lt;th&gt;&lt;fmt:messagekey="link.Date" /&gt;&lt;/th&gt;
     &lt;th&gt;&lt;fmt:messagekey="link" /&gt;&lt;/th&gt;
     &lt;th&gt;&lt;fmt:messagekey="link.status" /&gt;&lt;/th&gt;
     &lt;th&gt;&lt;fmt:messagekey="linkinfo" /&gt;&lt;/th&gt;
     &lt;th&gt;&lt;fmt:messagekey="common.scanner" /&gt;&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
  &lt;/table&gt;                        
     &lt;/div&gt;
     &lt;div style="height: 85%;overflow-x:visible;"&gt;
  &lt;div&gt;                                   
       &lt;table style="width: 900px;" id="divTable"&gt;
    &lt;colgroup&gt;
     &lt;col style="width: 115px"&gt;
      &lt;col style="width: 180px"&gt;
      &lt;col style="width: 180px"&gt;
      &lt;col style="width: 180px"&gt;
     &lt;/colgroup&gt;
     &lt;tbody&gt;
     &lt;s:iterator status="Bean" value="%{FormBean.listBean}"&gt;
      &lt;tr&gt;
           &lt;td&gt;
        &lt;input  name="FormBean.listBean[${index}].id"value="&lt;s:property value="id"/&gt;" type="hidden" /&gt;
        &lt;s:checkbox theme="simple"name="FormBean.list[%{#index}].selected"
  value="selected" fieldValue="true"onclick="javascript:uncheckCheckbox(this)" /
           &lt;/td&gt;
           &lt;td&gt;
            &lt;inputstyle="width: 80px; float: left; border-style: none;"type="text" readonly="readonly" name="FormBean.listBean[${index}].Date" value='&lt;s:property value="departureDate"/&gt;'id="datepickerForTable[${index}]" class="sg4pInput" /&gt;
        &lt;inputid="hiddenDate"name="FormBean.listBea [${index}].Date"value="&lt;s:property value="Date"/&gt;" type="hidden" /&gt;
            &lt;/td&gt;
            &lt;td&gt;
             &lt;a class="link-button ui-state-default"&gt;&lt;/a&gt;
            &lt;/td&gt;
        &lt;td&gt;
             &lt;s:iterator status="status" value="%{FormBean.Status}" id="idStatus"&gt;
             &lt;s:if test="FormBean.Status == #idStatus.intValue"&gt;
              &lt;fmt:message key="${name}" /&gt;
             &lt;/s:if&gt;
             &lt;/s:iterator&gt;
            &lt;/td&gt;
            &lt;td&gt;
             &lt;s:property value="info" /&gt;
            &lt;/td&gt;
            &lt;td&gt;
             &lt;s:property value="Code" /&gt;
            &lt;/td&gt;
           &lt;/tr&gt;
          &lt;/s:iterator&gt;
         &lt;/tbody&gt;
        &lt;/table&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I'm using like</p>
  
  <p><strong>Case1</strong>: using overflow to main div</p>
  
  <p><strong>problem faced</strong> :  Table Header is not fixed. tried every solution (position..not working)</p>
  
  <pre><code>&lt;div&gt;
    &lt;div style="overflow: auto"&gt;
      &lt;div&gt;
        &lt;table&gt;
          &lt;thead&gt;.....&lt;/thead&gt;
        &lt;/table&gt;
      &lt;div&gt;
      &lt;div style="overflow-x:visible"&gt;
       &lt;table&gt;
        &lt;tbody&gt;....&lt;/tbody&gt;
       &lt;/table&gt;
      &lt;/div&gt;
      &lt;div&gt;
       &lt;div&gt;
  </code></pre>
  
  <p><strong>Case2</strong> : using overflow to tbody i.e to scroll the body contents.</p>
  
  <p><strong>problem faced</strong> :  Vertical scrollbar is not fixed. i.e. It goes inside when we scroll by Horizontal scrollbar.</p>
  
  <pre><code> &lt;div&gt;
    &lt;div style="overflow-x:auto"&gt;
      &lt;div&gt;
        &lt;table&gt;
          &lt;thead&gt;.....&lt;/thead&gt;
        &lt;/table&gt;
      &lt;div&gt;
      &lt;div style="overflow-x:visible;overflow-y:auto"&gt;
       &lt;table&gt;
        &lt;tbody&gt;....&lt;/tbody&gt;
       &lt;/table&gt;
      &lt;/div&gt;
      &lt;div&gt;
       &lt;div&gt;
  </code></pre>
  
  <p>also tried using fixedTableHeader() plugin from this <a href="http://fixedheadertable.com/" rel="nofollow">http://fixedheadertable.com/</a></p>
  
  <p>Want to have fixed Table header and fixed vertical scroll when moving horizontal scrollbar in a <code>&lt;div&gt;</code> ?</p>