[英]How can I make the first column of a table fixed and have a scroll in rest columns
我正在動態創建表。 這是執行循環后的代碼。
<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>
我想將第一列設為靜態。 我也嘗試使用固定表頭插件，但是它不起作用。 誰能幫我？
您的問題得到了答案： 如何創建具有固定/凍結的左列和可滾動主體的HTML表？
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>
嘗試一下：可能會對您有所幫助（仍然不需要進行任何調整）
.fixed_headers { table-layout: fixed; border-collapse: collapse; } .fixed_headers th, .fixed_headers td { max-width: 200px; } .fixed_headers th { text-decoration: underline; } .fixed_headers th, .fixed_headers td { padding: 5px; text-align: left; } .fixed_headers thead { background-color: #333; color: #FDFDFD; } .fixed_headers thead tr { display: block; position: relative; } .fixed_headers tbody { display: block; overflow: auto; width: 100%; height: 300px; } .fixed_headers tbody tr:nth-child(even) { background-color: #DDD; } .old_ie_wrapper { height: 300px; width: 750px; overflow-x: hidden; overflow-y: auto; } .old_ie_wrapper tbody { height: auto; }
<!-- Reference :https://codepen.io/tjvantoll/pen/JEKIu --> <table class="guide-table fixed_headers" bordercolorlight="#EEEEEE" bordercolordark="#EEEEEE" id="channels-table" width="2500px" bordercolor="#EEEEEE" border="10"> <thead> <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> </thead> <tbody> <tr> <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>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>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>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>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>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> </tbody> </table>
如何制作一個表頭和第一列固定在垂直和水平滾動的表？
[英]How do I make a table with header and first column fixed on scroll vertical and horizontal?
我們如何使帶有 html 表標題的前三列固定，其他所有列都可以滾動
[英]How we make first three columns with headings of a html table to be fixed and other all columns could be scroll-able
如何更改FixedTableHeader jQuery插件以獲得固定的第一列？
[英]How can I alter the FixedTableHeader jQuery plugin to have a fixed first column as well?
如何使CSS滾動固定在表標題和第一列上（我也對使用JS或JQuery的想法持開放態度）
[英]How do I make my CSS scrolling fixed to table header and the first column (I'm also open to the idea using JS or JQuery)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.