javascript - 如何在标题固定的情况下通过水平和垂直滚动移动表中的列

Question

我正在尝试显示将同时具有水平和垂直滚动的表格，并且标题将水平移动但不会垂直移动，而主体将同时垂直和水平移动。 另一个要求是改变列的位置......我能够实现这一点但无法在垂直滚动期间保持标题固定。 header 也在向上移动。

CSS:

<style>
    table, td, th {
       border: 1px solid black;
    }
    table {
       border-collapse: collapse;
    }
   th, td {
       padding: 8px;
       text-align: left;
    }
</style>

<style>
    .alt tr:nth-child(odd) {
       background: #CCECFF;
    }

    .altfp tr:nth-child(odd) {
        background: #CCFF99;
    } 

</style>
<style>
    .scroll-table-outer {height: 300px; overflow-x: scroll;}
    .scroll-table, td{border-collapse:collapse; border:1px solid #777; min-width: 110px;}
</style>

脚本:

<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="./js/jquery-1.12.4.js"></script>
<script src="./js/dragtable.js" type="text/javascript" ></script>

HTML:

<div class="scroll-table-outer">
    <table class="draggable forget-ordering" id="details" width="90%">
        <thead>
            <tr>
                <th class="part col1">Part Number</th>
                <th class="replaces col2">Replaces</th> 
                <th class="replacedby col3">Replaced_By</th>
                <th class="site col4">Site</th>
                <th class="brand col5">Brand</th>
                <th class="com col6">Commodity</th>
                <th class="owner col7">Owner</th>
                <th class="desc col8">Description</th>
                <th class="desc2 col9">Description2</th>
              ##<th class="mdqty">MD Qty Per</th>
                <th class="mdpn col10">MD PN</th>
                <th class="mdtrackerpn coll1">MD Tracker PN</th>
                <th class="price coll2">YE Price Var Savings </th>
                <th class="plan coll3">YE Plan Spend K</th>
                <th class="spend coll4">YE Spend K</th>
                <th class="base coll5">YE Adj 4Q Base Spend</th>
                <th class="price coll6">1Q Price Var Savings K</th>
                <th class="plan coll7">1Q Plan Spend K</th>
                <th class="spend coll8">1Q Spend K</th>
                <th class="base coll9">1Q Adj 4Q Base Spend</th>
                <th class="price coll10">2Q Price Var Savings K</th>
                <th class="plan cola">2Q Plan Spend K</th>
                <th class="spend colb">2Q Spend K</th>
                <th class="base colc">2Q Adj 4Q Base Spend</th>
                <th class="price cold">3Q Price Var Savings K</th>
                <th class="plan cole">3Q Plan Spend K</th>     
                <th class="spend colf">3Q Spend K</th>
                <th class="base colg">3Q Adj 4Q Base Spend</th>
                <th class="price col1a">4Q Price Var Savings K</th>
                <th class="plan col1b">4Q Plan Spend K</th>
                <th class="spend col1c">4Q Spend K</th>
                <th class="base col1d">4Q Adj 4Q Base Spend</th>
           </tr>
      </thead>

      #if ($emptyPartListSearchResult=="true")
        <p><strong>No results found for specified criteria.</strong></p>
      #end

     #if($request.getSession().getAttribute("run") == "tp")
       <tbody class="alt tg draggable"> 
     #elseif($request.getSession().getAttribute("run") == "tfp")
       <tbody class="altfp tg">
     #end

     #set ($cnt = 0 )                   
     #foreach($pl in $rplist)
     <tr> 
         <td class="part col1" >$pl.partNum</a></td>
         <td class="replaces col2" >$pl.replaces</td>
         <td class="replacedby col3" >$pl.replacedBy</td>
         <td class="site col4" >$pl.site</td>
         <td class="brand col5">$pl.brand</td>
         <td class="com col6">$pl.commodity</td>
         <td class="owner col7">$pl.owner</td>  
         <td class="desc col8">$pl.description</td> 
         <td class="desc2 col9">$pl.description2</td>
         <td class="mdpn col10">$pl.mdPN</td>
         <td class="mdtrackerpn coll1">$pl.mdTrackerPn</td>     


         #foreach($i in [0..$priceysize])
            #if($i == $cnt)
              <td align="right" class="price coll2 ">$pricey.get($i)</td>
            #end
         #end
         #foreach($i in [0..$planysize])
            #if($i == $cnt)
             <td align="right" class="plan coll3">$plany.get($i)</td>
            #end
         #end
         #foreach($i in [0..$spendysize])
            #if($i == $cnt)
              <td align="right" class="spend coll4">$spendy.get($i)</td>
            #end
         #end
         #foreach($i in [0..$baseysize])
            #if($i == $cnt)
              <td align="right" class="base coll5">$basey.get($i)</td>
            #end
         #end
         #foreach($i in [0..$price1size])
           #if($i == $cnt)
             <td align="right" class="price coll6">$price1.get($i)</td>
           #end
         #end
         #foreach($i in [0..$plan1Qsize])
           #if($i == $cnt)
             <td align="right" class="plan coll7">$plan1Q.get($i)</td>
           #end
         #end
         #foreach($i in [0..$spend1size])
           #if($i == $cnt)
             <td align="right" class="spend coll8">$spend1.get($i)</td>
           #end
         #end
         #foreach($i in [0..$base1size])
           #if($i == $cnt)
             <td align="right" class="base coll9">$base1.get($i)</td>
           #end
         #end
         #foreach($i in [0..$price2size])
           #if($i == $cnt)
             <td align="right" class="price coll10">$price2.get($i)</td>
           #end
         #end
         #foreach($i in [0..$plan2size])
           #if($i == $cnt)
             <td align="right" class="plan cola">$plan2.get($i)</td>
           #end
         #end
         #foreach($i in [0..$spend2size])
           #if($i == $cnt)
             <td align="right" class="spend ">$spend2.get($i)</td>
           #end
         #end
         #foreach($i in [0..$base2size])
           #if($i == $cnt)
             <td align="right" class="base ">$base2.get($i)</td>
           #end
         #end
         #foreach($i in [0..$price3size])
           #if($i == $cnt)
             <td align="right" class="price ">$price3.get($i)</td>
           #end
         #end
         #foreach($i in [0..$plan3size])
           #if($i == $cnt)
             <td align="right" class="plan ">$plan3.get($i)</td>
           #end
         #end
         #foreach($i in [0..$spend3size])
           #if($i == $cnt)
             <td align="right" class="spend ">$spend3.get($i)</td>
           #end
         #end
         #foreach($i in [0..$base3size])
           #if($i == $cnt)
             <td align="right" class="base ">$base3.get($i)</td>
           #end
         #end   
         #foreach($i in [0..$price4size])
           #if($i == $cnt)
             <td align="right" class="price ">$price4.get($i)</td>
           #end
         #end
         #foreach($i in [0..$plan4size])
           #if($i == $cnt)
             <td align="right" class="plan ">$plan4.get($i)</td>
           #end
         #end
         #foreach($i in [0..$spend4size])
           #if($i == $cnt)
             <td align="right" class="spend ">$spend4.get($i)</td>
           #end
         #end
         #foreach($i in [0..$base4size])
           #if($i == $cnt)
             <td align="right" class="base ">$base4.get($i)</td>
           #end
         #end                           
    </tr>

    #set ( $cnt = $cnt + 1 )
    #end
    <tr>
      <td class="part">Totals</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td> 
      <td align="right" class="price ">$totpricey</td>
      <td align="right" class="plan ">$totplany</td>
      <td align="right" class="spend ">$totspendy</td>
      <td align="right" class="base ">$totbasey</td>
      <td align="right" class="price ">$totprice1</td>
      <td align="right" class="plan ">$totplan1Q</td>
      <td align="right" class="spend ">$totspend1</td>
      <td align="right" class="base ">$totbase1</td>
      <td align="right" class="price ">$totprice2</td>
      <td align="right" class="plan ">$totplan2</td>
      <td align="right" class="spend ">$totspend2</td>
      <td align="right" class="base ">$totbase2</td>
      <td align="right" class="price ">$totprice3</td>
      <td align="right" class="plan ">$totplan3</td>
      <td align="right" class="spend ">$totspend3</td>
      <td align="right" class="base ">$totbase3</td>
      <td align="right" class="price ">$totprice4</td>
      <td align="right" class="plan ">$totplan4</td>
      <td align="right" class="spend ">$totspend4</td>
      <td align="right" class="base ">$totbase4</td>
   </tr>
 </tbody>       
</table>    

Answer 1

table{border-collapse: collapse; border-spacing: 0;}
table,td,th{border: 1px solid #ccc;}
thead{background: #fff;}
td,th{padding: 4px;}

<html>
    <head>
    </head>
    <body>
    <table id="customers">
      <thead>  
          <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
          </tr>
      </thead>
      <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
        <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </tbody></table>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.0.3/jquery.floatThead.js"></script> 
    <script>
    var $table = $('#customers');
    $table.floatThead();
    </script>
 </body> 
</html>

对于拖动列，我的解决方案是销毁运行拖动的标题

$(document).ready(function(){
   var table = $('#customers');
   table.floatThead();
   $('.destroy').click(function(){
       table.floatThead('destroy');
       $('th').prepend('<i class="handle"></i>');
       table.dragtable({
           dragHandle: '.handle',
           maxMovingRows: 1
       });
   });
});