具有固定TH宽度的表头的JS代码必须等于TD宽度
固定在滚动上的标题工作正常。但我想要的是，
标题TH应该等于正文TD。
你现在可以看到两者都有不同的宽度。 如果问题不清楚，请告诉我。我不想使用任何其他JS LIB或插件。
(function ($) {
$.fn.headerFixed = function (topOffSetVal,fTableID,topPosition) {
var tableWidth = $('#'+fTableID).width();
$(window).scroll(function(){
if($(this).scrollTop() > topOffSetVal){
$("#"+fTableID+' > thead').css({'position':'fixed','top':topPosition+'px','margin-left':'0px','width':tableWidth+'px'});
}else{
$("#"+fTableID+' > thead').removeAttr('style')
}
});
$( window ).resize(function() {
tableWidth = $('#'+fTableID).width();
$("#"+fTableID+' > thead').css({'position':'fixed','top':topPosition+'px','margin-left':'0px','width':tableWidth+'px'});
});
};
})(jQuery);
$(document).ready(function(){
$('#myID').headerFixed(400,'myID',0);
});.table tr, .table td{
border:0.1px solid #ddd;
}
.table thead{
background:#C00; color:#FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="1235" border="0" align="center" class="table" id="myID" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th width="45">Sr#</th>
<th align="center">MAP</th>
<th width="112">YARD ID</th>
<th width="85">NAME</th>
<th width="107">REGION</th>
<th width="150">YARD PORT</th>
<th width="124">ADDRESS</th>
<th width="168">ACCESS INFO</th>
<th width="130">CAPACITY</th>
<th width="104">TIMING</th>
<th width="125">Web</th>
<th align="center" width="128">Auction</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
<tr>
<td>1</td>
<td align="center">
<img src="http://www.placehold.it/150x84?text=Image Not Found :(" />
</td>
<td>3453</td>
<td>test name</td>
<td>kanagawa</td>
<td>Ktoyo</td>
<td>Test address here, address address address address</td>
<td>Access info goes here Access info goes here</td>
<td>5600</td>
<td>80:50 PM</td>
<td>Yes</td>
<td align="center">
<a href='javascript:;' title="Delete Record">Delete</a>
<a href='' title="Images Edit">Edit Image</a>
<a href='' title="Time Edit">Time Edit</a>
<a href='' title="Edit Record">Edit Rec.</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Sr#</th>
<th>MAP</th>
<th>YARD ID</th>
<th>NAME</th>
<th>REGION</th>
<th>YARD PORT</th>
<th>ADDRESS</th>
<th>ACCESS INFO</th>
<th>CAPACITY</th>
<th>TIMING</th>
<th>Show on Web</th>
<th>Auction</th>
</tr>
</tfoot>
</table>
谢谢Zaid Bin Khalid
1 个答案:
答案 0 :(得分：2)
你传递的固定宽度为1233像素，这就是header.th！= body.td
的原因使用此
更新您的jquery功能代码(function ($) {
$.fn.headerFixed = function (topOffSetVal,fTableID,topPosition) {
var tableWidth = $('#'+fTableID).width();
$(window).scroll(function(){
if($(this).scrollTop() > topOffSetVal){
$("#"+fTableID+' > thead').css({'position':'fixed','top':topPosition+'px','margin-left':'0px','width':tableWidth+'px'});
}else{
$("#"+fTableID+' > thead').removeAttr('style')
}
});
$( window ).resize(function() {
tableWidth = $('#'+fTableID).width();
$("#"+fTableID+' > thead').css({'position':'fixed','top':topPosition+'px','margin-left':'0px','width':tableWidth+'px'});
});
};
})(jQuery);
$(document).ready(function(){
$('#myID').headerFixed(400,'myID',0);
});
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？