JSコードは、スクロールに固定された幅

ヘッダが正常に動作TDに等しくなければなりません。しかし、私が欲しいもの、JSコードは、スクロールに固定された幅

ヘッダー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が伸びたのはその理由です。 –

あなたが理由header.thだ1233pxの固定幅を渡している！= 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コードは、スクロールに固定された幅

答えて

関連する問題