javascript - 表头固定的JS代码TH宽度必须等于TD宽度

标签 javascript jquery html css

固定在滚动条上的页眉工作正常。但我想要的，

Header TH 应该等于 Body TD。

enter image description here

您现在可以看到两者具有不同的宽度。 如果问题不清楚，请告诉我。我不想使用任何其他 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>

谢谢扎伊德·本·哈立德

最佳答案

您传递的是 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);
});

关于javascript - 表头固定的JS代码TH宽度必须等于TD宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44402529/

上一篇：javascript - GA 事件不会因从 css 文件加载的损坏图像而被触发

下一篇：javascript - React 入门套件与 Next.js

相关文章：

javascript - 将焦点放在 onchange 事件中的文本框上

javascript - 无法在 IE9 及更高版本中从 HyperLink 控件打开文件

javascript - 在变量中使用正则表达式验证字符串

jQuery 添加事件监听器

javascript - Angular .js : How to add userinput for price and keep subtotal

javascript - 如何在 vue js 中使用 html 的选择选项仅显示该类别的服务？

html - 将下拉框内的文本对齐到中间

javascript - 在顶部加载我的所有页面

javascript - modal.js 中复杂的自定义 $.Event

javascript - Iphone 在点击时使 div 变暗

©2024 IT工具网  联系我们