Javascript 如何固定表的第一列并在rest列中滚动_Javascript_Jquery_Html_Css

Javascript 如何固定表的第一列并在rest列中滚动

javascript jquery html css

Javascript 如何固定表的第一列并在rest列中滚动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在动态创建一个表。这是循环执行后的代码 <table class="guide-table" bordercolorlight="#EEEEEE" bordercolordark="#EEEEEE" id="channels-table" width="2500px" bordercolor="#EEEEEE" border="10"> <tbody> <tr id="headerRow"> <td i

我正在动态创建一个表。这是循环执行后的代码

<table class="guide-table" bordercolorlight="#EEEEEE" bordercolordark="#EEEEEE" id="channels-table" width="2500px" bordercolor="#EEEEEE" border="10">
    <tbody>
        <tr id="headerRow">
            <td id="date" class="">Mon, 9 Feb</td>
            <td>12:00 AM</td>
            <td>12:30 AM</td>
            <td>01:00 AM</td>
            <td>01:30 AM</td>
            <td>02:00 AM</td>
            <td>02:30 AM</td>
            <td>03:00 AM</td>
            <td>03:30 AM</td>
            <td>04:00 AM</td>
            <td>04:30 AM</td>
            <td>05:00 AM</td>
            <td>05:30 AM</td>
            <td>06:00 AM</td>
            <td>06:30 AM</td>
            <td>07:00 AM</td>
            <td>08:00 AM</td>
            <td>08:30 AM</td>
            <td>09:00 AM</td>
            <td>09:30 AM</td>
            <td>10:00 AM</td>
            <td>10:30 AM</td>
            <td>11:00 AM</td>
            <td>11:30 AM</td>
            <td>12:00 PM</td>
            <td>12:30 PM</td>
            <td>01:00 PM</td>
            <td>01:30 PM</td>
            <td>02:00 PM</td>
            <td>02:30 PM</td>
            <td>03:00 PM</td>
            <td>03:30 PM</td>
            <td>04:00 PM</td>
            <td>04:30 PM</td>
            <td>05:00 PM</td>
            <td>05:30 PM</td>
            <td>06:00 PM</td>
            <td>06:30 PM</td>
            <td>07:00 PM</td>
            <td>08:00 PM</td>
            <td>08:30 PM</td>
            <td>09:00 PM</td>
            <td>09:30 PM</td>
            <td>10:00 PM</td>
            <td>10:30 PM</td>
            <td>11:00 PM</td>
            <td>11:30 PM</td>
        </tr>
    </tbody>
    <tr>
        <td><img src="http://cps-static.rovicorp.com/2/Open/SonyTV%20Logos/NY1/NY1.png?partner=neeveecommunicationbms545xngmh4n3azd8ws3tjx" width="100px" height="35px"></td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>News All Night (05:30)</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>The Call (08:00)</td>
        <td>EMPTY</td>
        <td>Sports on 1 (09:00)</td>
        <td>EMPTY</td>
        <td>News First (10:00)</td>
        <td>EMPTY</td>
        <td>News All Morning (11:00)</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
    </tr>
    <tr>
        <td><img src="http://cps-static.rovicorp.com/2/Open/SourceLogos/400x300/WillowTV.png?partner=neeveecommunicationbms545xngmh4n3azd8ws3tjx" width="100px" height="35px"></td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>Ranji Trophy Cricket: A semifinal (07:10)</td>
        <td>International Test Cricket: Day 4: South Africa vs. Sri Lanka (08:00)</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
    </tr>
    <tr>
        <td><img src="http://cps-static.rovicorp.com/2/Open/SonyTV%20Logos/NDTV/NDTV.png?partner=neeveecommunicationbms545xngmh4n3azd8ws3tjx" width="100px" height="35px"></td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>NDTV Hindi News Channel (05:00)</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
        <td>EMPTY</td>
    </tr>
</table>


2月9日，星期一
上午12:00
上午12:30
凌晨1:00
凌晨1:30
凌晨2:00
凌晨2:30
凌晨3:00
凌晨3:30
凌晨4:00
上午4:30
上午5:00
上午5:30
上午6:00
上午6:30
上午7:00
上午8:00
上午8:30
上午9:00
上午9:30
上午10:00
上午10:30
上午11:00
上午11:30
下午12:00
下午12:30
下午1:00
下午1时30分
下午二时
下午二时三十分
下午3:00
下午三时三十分
下午四时
下午四时三十分
下午五时
下午五时三十分
下午六时
下午6:30
晚上7:00
晚上8:00
晚上8:30
晚上9:00
晚上9:30
晚上10:00
晚上10:30
晚上11:00
晚上11:30
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
通宵新闻（05:30）
空的
空的
空的
空的
电话（08:00）
空的
体育1日（09:00）
空的
新闻第一（10:00）
空的
整个上午的新闻（11:00）
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
兰吉杯板球：半决赛（07:10）
国际板球测试：第4天：南非对斯里兰卡（08:00）
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
NDTV印地语新闻频道（05:00）
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的

我想使第一列成为静态的。我也尝试使用固定表头插件，但它不起作用。有人能帮我吗？

试试这个：可能对你有帮助（仍然需要一些调整）

。修复了\u标题{
表布局：固定；
边界塌陷：塌陷；
}
.固定标题，
.固定标题td{
最大宽度：200px；
}
.固定标题{
文字装饰：下划线；
}
.固定标题，
.固定标题td{
填充物：5px；
文本对齐：左对齐；
}
.fixed_thead{
背景色：#333；
颜色：#FDFDFD；
}
.fixed_headers thead tr{
显示：块；
位置：相对位置；
}
.固定式车身{
显示：块；
溢出：自动；
宽度：100%；
高度：300px；
}
.fixed_头体tr:n个子体（偶数）{
背景色：#DDD；
}
.旧包装纸{
高度：300px；
宽度：750px；
溢出x：隐藏；
溢出y：自动；
}
.旧车身{
高度：自动；
}


2月9日，星期一
上午12:00
上午12:30
凌晨1:00
凌晨1:30
凌晨2:00
凌晨2:30
凌晨3:00
凌晨3:30
凌晨4:00
上午4:30
上午5:00
上午5:30
上午6:00
上午6:30
上午7:00
上午8:00
上午8:30
上午9:00
上午9:30
上午10:00
上午10:30
上午11:00
上午11:30
下午12:00
下午12:30
下午1:00
下午1时30分
下午二时
下午二时三十分
下午3:00
下午三时三十分
下午四时
下午四时三十分
下午五时
下午五时三十分
下午六时
下午6:30
晚上7:00
晚上8:00
晚上8:30
晚上9:00
晚上9:30
晚上10:00
晚上10:30
晚上11:00
晚上11:30
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
通宵新闻（05:30）
空的
空的
空的
空的
电话（08:00）
空的
体育1日（09:00）
空的
新闻第一（10:00）
空的
整个上午的新闻（11:00）
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
空的
兰吉杯板球：半决赛（07:10）
国际板球测试：第4天：南非vs。