Is there a way to display a table that scrolls both horizontally and vertically, with the header moving horizontally but not vertically while the body moves in both directions? I have been able to shift the position of the columns, however, I am struggling to keep the header fixed during vertical scroll as it also moves 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>
// more code here...
</tr>
#set ( $cnt = $cnt + 1 )
#end
<tr>
<td class="part">Totals</td>
// more rows here...
</tr>
</tbody>
</table>