如何修复div中的垂直滚动条

Question

对于我的问题，stackoverflow中给出了很多答案。但我需要的是可以修改我现有的代码，或者可以使用任何jQuery插件。

我的最终结果应该是final Result with vertical overflow and table header fixed

用于显示我正在使用HTML代码的表格

<div id="tables" style="width: 100%">
 <div id="divs1" style="width: 100%;margin-right:10px; float: left">
  <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%;" >
   <div style="margin-right: 0px;"> 
<table style="width: 900px;" class="div2">
 <colgroup>
  <col style="width: 115px">
  <col style="width: 180px">
  <col style="width: 180px">
  <col style="width: 180px">
 </colgroup>
 <thead>
  <tr id=rowHeader class=ui-sortable>
   <th>&nbsp;</th>
   <th><fmt:messagekey="link.Date" /></th>
   <th><fmt:messagekey="link" /></th>
   <th><fmt:messagekey="link.status" /></th>
   <th><fmt:messagekey="linkinfo" /></th>
   <th><fmt:messagekey="common.scanner" /></th>
  </tr>
 </thead>
</table>                        
   </div>
   <div style="height: 85%;overflow-x:visible;">
<div>                                   
     <table style="width: 900px;" id="divTable">
  <colgroup>
   <col style="width: 115px">
    <col style="width: 180px">
    <col style="width: 180px">
    <col style="width: 180px">
   </colgroup>
   <tbody>
   <s:iterator status="Bean" value="%{FormBean.listBean}">
    <tr>
         <td>
      <input  name="FormBean.listBean[${index}].id"value="<s:property value="id"/>" type="hidden" />
      <s:checkbox theme="simple"name="FormBean.list[%{#index}].selected"
value="selected" fieldValue="true"onclick="javascript:uncheckCheckbox(this)" /
         </td>
         <td>
          <inputstyle="width: 80px; float: left; border-style: none;"type="text" readonly="readonly" name="FormBean.listBean[${index}].Date" value='<s:property value="departureDate"/>'id="datepickerForTable[${index}]" class="sg4pInput" />
      <inputid="hiddenDate"name="FormBean.listBea [${index}].Date"value="<s:property value="Date"/>" type="hidden" />
          </td>
          <td>
           <a class="link-button ui-state-default"></a>
          </td>
      <td>
           <s:iterator status="status" value="%{FormBean.Status}" id="idStatus">
           <s:if test="FormBean.Status == #idStatus.intValue">
            <fmt:message key="${name}" />
           </s:if>
           </s:iterator>
          </td>
          <td>
           <s:property value="info" />
          </td>
          <td>
           <s:property value="Code" />
          </td>
         </tr>
        </s:iterator>
       </tbody>
      </table>
     </div>
    </div>
   </div>
  </div>

我正在使用

Case1 ：使用溢出到主div

面临的问题：表标题未修复。尝试了每一个解决方案（位置......不工作）

<div>
  <div style="overflow: auto">
    <div>
      <table>
        <thead>.....</thead>
      </table>
    <div>
    <div style="overflow-x:visible">
     <table>
      <tbody>....</tbody>
     </table>
    </div>
    <div>
     <div>

Case2 ：使用溢出到tbody，即滚动正文内容。

面临的问题：垂直滚动条未修复。即当我们通过水平滚动条滚动时它会进入。

 <div>
  <div style="overflow-x:auto">
    <div>
      <table>
        <thead>.....</thead>
      </table>
    <div>
    <div style="overflow-x:visible;overflow-y:auto">
     <table>
      <tbody>....</tbody>
     </table>
    </div>
    <div>
     <div>

还尝试使用此http://fixedheadertable.com/

中的fixedTableHeader（）插件

在<div>中移动水平滚动条时想要固定表格标题和固定垂直滚动吗？