javascript - 如何固定表格的第一列并在其余列中滚动

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

<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>

我想将第一列设为静态。我也尝试使用固定表头插件，但是它不起作用。谁能帮我？

最佳答案

您的问题的答案为：how do I create an HTML table with fixed/frozen left column and scrollable body?

        body { font:16px Calibri;}
        table { border-collapse:separate; border-top: 3px solid grey; }
        td, th {
            margin:0;
            border:3px solid grey;
            border-top-width:0px;
            white-space:nowrap;
        }
        div {
            width: 600px;
            overflow-x:scroll;
            margin-left:5em;
            overflow-y:visible;
            padding-bottom:1px;
        }
        .headcol {
            position:absolute;
            width:5em;
            left:0;
            top:auto;
            border-right: 0px none black;
            border-top-width:3px; /*only relevant for first row*/
            margin-top:-3px; /*compensate for top border*/
        }
        .headcol:before {content: 'Row ';}
        .long { background:yellow; letter-spacing:1em; }

<div><table>
        <tr><th class="headcol">1</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">2</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">3</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">4</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">5</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">6</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">7</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">8</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        <tr><th class="headcol">9</th><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
</table></div>

关于javascript - 如何固定表格的第一列并在其余列中滚动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41547980/