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

Question

I am trying to display table which will have the both horizontal and vertical scrolling and the header will move horizontally but not vertically whereas the body will move both vertical and horizontal. Another requirement is the shift the position of the columns...I am able to achieve this but not able to keep the header fixed during vertical scroll. The header is also moving up.

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>

SCRIPTS:

<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> 

for drag column my solution was destroy header that run drag

$(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
       });
   });
});