How can I make the first column of a table fixed and have a scroll in rest columns

Question

I am creating a table dynamically. This is the code after the loops have executed.

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

I want to make the first column static. I tried to used fixed table header plugin as well but it is not working. Can anyone help me?

I almost tried all the codes from over here http://stackoverflow.com/questions/1312236/how-do-i-create-an-html-table-with-fixed-frozen-left-column-and-scrollable-body But none seem to resolve the issue at my end. — Ali Zia, Jan 09 '17 at 12:23
Possible duplicate of [Freeze the top row for an html table only (Fixed Table Header Scrolling)](http://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling) — Dipiks, Jan 09 '17 at 12:44
Possible duplicate of [HTML table with horizontal scrolling (first column fixed)](http://stackoverflow.com/questions/3402295/html-table-with-horizontal-scrolling-first-column-fixed) — Heretic Monkey, Jan 09 '17 at 16:24

score 1 · Accepted Answer · edited May 23 '17 at 12:33

Your question had the answer: 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>

score 0 · Answer 2 · answered Jan 09 '17 at 16:19

Try This : Might help you (Few adjustments are still needed)

.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 can I make the first column of a table fixed and have a scroll in rest columns

2 Answers2