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

我正在动态创建表格。这是循环执行后的代码。如何使表格的第一列固定并在其余列中滚动

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

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

来源

2017-01-09 Ali Zia

那你尝试过'css'或'javascript'的地方在哪里？ – NewToJS

我几乎尝试从这里的所有代码http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-身体但在我看来没有人能够解决这个问题。 –

[只冻结html表格顶部行（固定表格标题滚动）]的可能重复（http://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-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>

来源

2017-01-10 09:20:39 ThinhLe

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

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

来源

2017-01-09 16:19:10

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

回答

相关问题