html - 可滚动div内的静态标题

Question

我有一个可水平和垂直滚动的 div。问题是我的表头水平扩展得很远，因为它是一个包含很多列的表头。我希望能够在表格上左右滚动，但垂直滚动并将该标题始终保持在顶部，但能够随时向左滚动并显示标题的其余部分。我在网上找到了一些 javascript 示例，但我没有看到任何关于如何在 div 中执行此操作的内容，并且我尝试将它们合并但不起作用。

谁能帮我这个？

   <div style = "margin:20px 0px 7px 15px">
     <strong>&nbsp&nbspAudit Log:</strong> 
     <div style="width:750px; height:580px; border-width:1px; border-style:solid; border-color:#000; background: #bbb">        
       <div style="margin:20px 0px 0px 12px">  
         <div class="container">
           <div class="heading">
              <table>
                <tr>
                  <th style="width:160px">Time:</th>
                  <th style="width:210px">Source:</th>
                  <th style="width:75px">Category:</th>
                  <th style="width:90px">Ssa Admin:</th>
                  <th style="width:85px">UserID:</th>
                  <th style="width:50px">Action:</th>
                </tr>
              </table> 
            </div>
            <div wicket:id="repeaterContainer">
              <table style="table-layout: fixed; width:505px"> 
                <tr wicket:id="repeatingList" class="spaceUnder">
                 <td style="width:160px" wicket:id="time"></td>
                 <td style="width:220px" wicket:id="source"></td>
                 <td style="width:70px" wicket:id="category"></td>
                 <td style="width:90px" wicket:id="ssaAdmin"></td>
                 <td style="width:80px" wicket:id="userID"></td>  
                 <td style="width:250px" wicket:id="action"></td>     
                </tr>
              </table> 
            </div>
        </div>
      </div>

      div.container
      {
        position:relative;
        overflow:auto;
        width:720px;
        height:380px;
        border-width:1px;
        border-style:solid;
        border-color:#000;
        background: #fff;
      }

      div.heading
      {
        position: absolute; 
        border-bottom: 1px solid #000; 
        background: #bbb; 
        width:1250px;
      }
      </style>
  </wicket:head> 

  <wicket:extend>
    <script>
      $('.container').scroll(function() {
        $('.header').css({
          'left': 1250 - $(this).scrollLeft()
        });
      });
     </script>
     <p>
      <div wicket:id="tabs" class="tabpanel"></div>
     </p>  
   </wicket:extend>

Answer 1

我是否理解正确，您只需要滚动 tbody 并且整个表格都在 div 中吗？