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

【问题标题】：How can I make the first column of a table fixed and have a scroll in rest columns如何使表格的第一列固定并在其余列中滚动
【发布时间】：2017-05-23 17:05:06
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery html css


【解决方案1】：

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

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

【讨论】：

    【解决方案2】：

    你的问题有答案：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>

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2020-12-22
      • 2016-07-05
      • 2011-11-09
      • 2020-07-24
      • 2014-03-07
      • 2011-03-25
      • 1970-01-01
      • 2011-10-25
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode