我使用 displaytag 创建了一个表格。我想让表格标题或列标题固定，只有表格的主体应该滚动。我能够使包含表格的 div 可滚动。但是当滚动表格的标题时也会滚动。它没有保持固定。我尝试了一些方法。但是我没有运气。有人可以帮我吗？提前致谢。
我的代码：
<div id="ratesTableDiv" style="overflow-y: auto;height:250px;" >
<display:table class="tablesorter" export="false" id="data" class="displayTableBorder"
summary="This is the only table in the rates tab. It has the rates data for the selected plan." style="width:700px;"
name="PlanSummaryDTO.planRateList" uid="rates" rules="rows"
requestURI="PlanSummary"
decorator="com.cgi.hix.web.decorators.PortalHomePlansDecorator">
<display:setProperty name="paging.banner.placement" value="bottom" />
<display:setProperty name="basic.empty.showtable" value="true" />
<display:setProperty name="paging.banner.onepage" value="" />
<display:setProperty name="paging.banner.no_items_found" value="" />
<display:setProperty name="paging.banner.one_item_found" value="" />
<display:setProperty name="paging.banner.all_items_found" value="" />
<display:setProperty name="paging.banner.some_items_found" value="" />
<display:setProperty name="paging.banner.group_size" value="5" />
<display:setProperty name="paging.banner.full"
value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">◄◄</a> <a id="singlePrevRates" class="prev" href="{2}">◄</a> {0} <a id="singleNextRates" class="next" href="{3}">►</a> <a id="doubleNextRates" class="next" href="{4}">►► </a></span></span></p>' />
<display:setProperty name="paging.banner.first"
value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">◄◄</a> <a id="singlePrevRates" class="prev" href="{2}">◄</a> {0} <a id="singleNextRates" class="next" href="{3}">►</a> <a id="doubleNextRates" class="next" href="{4}">►► </a></span></span></p>' />
<display:setProperty name="paging.banner.last"
value='<p><span id="hix-pagination"><span> <a id="doublePrevRates" class="prev" href="{1}">◄◄</a> <a id="singlePrevRates" class="prev" href="{2}">◄</a> {0} <a id="singleNextRates" class="next" >►</a> <a id="doubleNextRates" class="next" >►► </a></span></span></p>' />
<display:caption media="html" class="captionHide">Rates</display:caption>
<display:setProperty name="paging.banner.page.separator"
value=" | " />
<display:setProperty name="paging.banner.group_size" value="4" />
<display:column property="age" scope="colgroup" headerScope="colgroup" title="${age}"
headerClass="hixTableHeader "
style="width: 10%;align: center;" class="displayTagtd" />
<display:column property="usesTobacco" scope="colgroup" headerScope="colgroup" title="${tobacco}"
headerClass="hixTableHeader" style="width: 30%;align: center;"
class="displayTagtd" />
<display:column property="rateAreaId" scope="colgroup" headerScope="colgroup" title="${ratingArea}"
headerClass="hixTableHeader" style="width: 15%;align: center;"
class="displayTagtd" />
<display:column property="rateAmount" scope="colgroup" headerScope="colgroup" title="${individualRate}"
headerClass="hixTableHeader"
style="width: 20%;align: center;" class="displayTagtd" />
<display:column property="individualTobaccoRate" scope="colgroup" headerScope="colgroup" title="${individualTobaccoRate}"
headerClass="hixTableHeader"
style="width: 30%;align: center;" class="displayTagtd" />
</display:table>
</div>
使用 div 并设置溢出-y 和高度，我可以获得滚动条。但是表格的表头也会滚动。表头如何固定？
我尝试了以下代码：
现在标题是固定的，它不会随着正文滚动。但是每个列标题的宽度与每个列体的宽度不同。有没有办法解决这个问题？
$(document).ready(function()
{ scrolify($('#ratesTableDiv'), 250);
});
function scrolify(tblAsJQueryObject, height){
var oTbl = tblAsJQueryObject;
// for very large tables you can remove the four lines below
// and wrap the table with <div> in the mark-up and assign
// height and overflow property
var oTblDiv = $("<div/>");
oTblDiv.css('height', height);
oTblDiv.css('overflow-y','scroll');
oTbl.wrap(oTblDiv);
// save original width
oTbl.attr("data-item-original-width", oTbl.width());
oTbl.find('thead tr td').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
oTbl.find('tbody tr:eq(0) td').each(function(){
$(this).attr("data-item-original-width",$(this).width());
});
// clone the original table
var newTbl = oTbl.clone();
// remove table header from original table
oTbl.find('thead tr').remove();
// remove table body from new table
newTbl.find('tbody tr').remove();
oTbl.parent().parent().prepend(newTbl);
newTbl.wrap("<div/>");
// replace ORIGINAL COLUMN width
newTbl.width(newTbl.attr('data-item-original-width'));
newTbl.find('thead tr td').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
oTbl.width(oTbl.attr('data-item-original-width'));
oTbl.find('tbody tr:eq(0) td').each(function(){
$(this).width($(this).attr("data-item-original-width"));
});
}