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

【问题标题】：How to move columns in a table with horizontal and vertical scroll with the header fixed如何在标题固定的情况下通过水平和垂直滚动来移动表格中的列
【发布时间】：2017-09-06 11:43:52
【问题描述】：

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

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>

【问题讨论】：

通过标题固定，我的意思是标题应该在垂直滚动时可见，同时它们应该在水平滚动时移动，并且在所有这些列的位置以及它们的标题可以更改...
您希望您的页眉固定在滚动条上吗？
mkoryak.github.io/floatThead 最适合您的解决方案
发布表格的标记输出或其简短版本，而不是生成表格的完整代码，这将有助于复制您当前的问题并解决它，或者如果可能的话，您可以在 sn-p 中发布Minimal, Complete, and Verifiable example？
@DmitriyLishtvan：我需要在垂直滚动期间固定标题，但同时我应该能够拖动列：akottr.github.io/dragtable ...

标签： javascript jquery html css html-table

【解决方案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
       });
   });
});

【讨论】：

akottr.github.io/dragtable我只是想通过拖列来提供这个插件
是的，如果你想调整列的大小，请检查我在 github 上的 repo dlishtvan.github.io/floatThead-with-resize