帶表格頭部的JS代碼固定TH寬度必須等於TD寬度

固定在滾動上的頁眉工作正常。但我想要的，帶表格頭部的JS代碼固定TH寬度必須等於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(){ 
 
\t $('#myID').headerFixed(400,'myID',0); 
 
});

.table tr, .table td{ 
 
\t border:0.1px solid #ddd; 
 
} 
 
.table thead{ 
 
\t 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> 
 
\t </table>

感謝認爲扎伊德本·哈立德

來源

2017-06-07 Zaid Bin Khalid

爲什麼你通過1233？ – karthick

位置固定拉伸THEAD @karthick，這就是爲什麼。 –

你傳入的1233px固定寬度是這樣的原因，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); 
});

來源

2017-06-07 02:50:53 karthick

這是有道理的謝謝@ karthick –

仍然，顯示相同的行爲。 –

它工作正常https://jsfiddle.net/ccrzoL2k/1/。你面臨的問題是什麼？ – karthick

帶表格頭部的JS代碼固定TH寬度必須等於TD寬度

回答

相關問題