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

时间：2017-01-09 12:20:31

标签： javascript jquery html css css3

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

<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 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
        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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个：可能会帮助你（仍然需要做很少的调整）

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!--
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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题