jquery - 制作第一行的固定标题

Demo

<div id="divScroll" style="overflow-x: hidden">
    <table id="tableAppointment" bgcolor="#fcfcfc" border="1" cellspacing="1" width="100%">

            <tr>
                <td class="csstextheader" width="70px"></td>
                <td class="csstextheader" width="70px">
                    <b>Time Slot&nbsp;</b>
                </td>
                <td><b>Room 7</b></td>
                <td><b>Room 8</b></td>
                <td><b>Room 9</b></td>
                <td><b>Room 10</b></td>
            </tr>



            <tr class="csstablelisttd">
                <td width="70px">08:00AM</td>
                <td>00</td>
                <td class="csstdred">John</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
    </table>
</div>

调用窗口onload

function resolutionIndependent()
        {
            var height;
            var tableMain;
            var divScroll;

            if (document.body && document.body.offsetWidth)
            {
                height = document.body.offsetHeight;
            }
            if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth)
            {
                height = document.documentElement.offsetHeight;
            }
            if (window.innerWidth && window.innerHeight)
            {
                height = window.innerHeight;
            }
            tableMain = document.getElementById('tableMain');
            divScroll = document.getElementById('divScroll');
            tableMain.style.height = parseFloat(height - 170) + 'px';
            divScroll.style.height = parseFloat(height - 170) + 'px';
            divScroll.style.overflow = "auto";
        }
 //***tableMain which is outer table of divScroll***

我必须将第一行的标题固定为..
我在第一行的每个单元格中添加style="position:fixed"。但没有得到输出
..怎么可能

最佳答案

嘿，您甚至可以使用简单的jquery函数，该函数将在不更改html代码的情况下为您提供结果

var tdWidth = $("#tableAppointment tbody tr td").width();
$("#tableAppointment thead").css({'position': 'fixed','top': '0','left': '-0.2%', 'background-color': '#f94d4d','color': '#FFFFFF','text-align': 'center','width': '100%'});

$("#tableAppointment thead tr th").width(tdWidth);

工作示例是jsfiddle