我使用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并设置overflow-y和height，我可以得到一个滚动条。但是表格的标题也会滚动。如何修改标题？
我尝试了以下代码：
现在标题已修复，并且不会与正文滚动。但是每个列标题的宽度与每个列体的宽度不同。有什么方法可以解决这个问题吗？
$(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"));
});
}
答案 0 :(得分：0)
修复theader并看到tbody滚动基本上可以实现设置：tbody {display:block;height:XX;overflo:scroll;}但你在thead和tbody之间松散了单元格对齐。
您可以使用类调整此值并最终克隆页脚。如果你的标题有一些colspans，这个选项应该更好。
看一下：http://codepen.io/gcyrillus/pen/aJysI用于滚动表，其中页眉（页脚）已修复。玩代码，我相信你会理解它的用法。 ：）
答案 1 :(得分：-1)
找到解决方案： 我使用dataTable jquery来做这件事。
首先我为表格设置了table-layout:fixed。
然后在js中添加以下代码：
$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"sScrollX": "100%",
"sScrollXInner": "100%",
"bLengthChange": false,
"bFilter": false,
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [
{ "bSortable": false, "sWidth" : "10%" },
{ "bSortable": true, "sWidth" : "30%" },
{ "bSortable": true, "sWidth" : "15%" },
{ "bSortable": true, "sWidth" : "20%" },
{ "bSortable": true, "sWidth" : "30%" }
],
}).fnAdjustColumnSizing( false );