Scroll HTML table horizontal and vertical while left column is fixed

Question

I'm trying to create an HTML table where its height is limited and the left side stay fixed while scrolling horizontally (and the table body is scrollable horizontally) but not fixed while scrolling vertically (the left side will be scrollable with the rest of the table).

fixed    scrollable
  1     body content
  2     body content
  3     body content
  4     body content
  .          .
  .          .
  .          .

I found this solution however, it only addresses an horizontal scrolling. In Eamon Nerbonne jsFiddle example, adding a height: 150px; to the div will demonstrate the bug I'm trying to solve.

I'd like to find a solution that involve only HTML & CSS.

Why would want the table to scroll vertically while the first column is fixed? wouldn't you be breaking the rows this way? — myajouri, Jan 01 '14 at 14:43
@myajouri Think about adding to the stack overflow's code box (table) a fixed td with row's numbers (1,2,3..). I want the row numbers to be fixed while the rest of the body is scrollable. — Lior Elrom, Jan 01 '14 at 14:46
But the line numbers scroll vertically with the rest of the box, don't they? lines would have wrong numbers otherwise. — myajouri, Jan 01 '14 at 14:56
Do you want a vertical scroll with the fixed first column as well? — Nagaraj Tantri, Jan 01 '14 at 14:57
@LearningByCoding I want the left td to be fixed while scrolling horizontally BUT not fixed while scrolling vertically (assuming table height is limited/fixed). — Lior Elrom, Jan 01 '14 at 15:00

score 5 · Accepted Answer · edited Jan 01 '14 at 17:39

Adding another div to the Eamon Nerbonne's solution, gave me the following solution:

jsFiddle

Basically the solution is, if you add another parent div that controls the flow of the secondary div might give you a go.

<div class="first">
    <div class="second">
        <table>
            <tr><td class="headcol">1</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">2</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">3</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">4</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">5</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">6</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">7</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">8</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
            <tr><td class="headcol">9</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td><td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td></tr>
        </table>
    </div>
</div>

I added style for the outer div like this:

div.first {
    width: auto;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 150px;     /* this is the height that you expect to contain */      
    padding-bottom: 1px;
    position: absolute;
    left:0;
    top:auto;
}

I want to add scroll bar after each individual tr and not for the table as a whole......what changes should I make? — Nikita Dhiman, Jul 14 '17 at 11:35
@NikitaDhiman You want each row with scroll with the first column fixed? Why don't you use a div inside each `tr`>`td` — Nagaraj Tantri, Jul 14 '17 at 12:58

score 2 · Answer 2 · answered May 10 '15 at 21:55

A little late but I did run across this thread when trying out solutions for myself. Assuming you're using modern browsers nowadays, I came up with a solution using CSS calc() to help guarantee widths met up.

.table-fixed-left table,
.table-fixed-right table {
  border-collapse: collapse;
}
.table-fixed-right td,
.table-fixed-right th,
.table-fixed-left td,
.table-fixed-left th {
  border: 1px solid #ddd;
  padding: 5px 5px;
}
.table-fixed-left {
  width: 120px;
  float: left;
  position: fixed;
  overflow-x: scroll;
  white-space: nowrap;
  text-align: left;
  border: 1px solid #ddd;
  z-index: 2;
}
.table-fixed-right {
  width: calc(100% - 145px);
  right: 15px;
  position: fixed;
  overflow-x: scroll;
  border: 1px solid #ddd;
  white-space: nowrap;
}
.table-fixed-right td,
.table-fixed-right th {
  padding: 5px 10px;
}

<div class="table-fixed-left">
  <table>
    <tr>
      <th>Normal Header</th>
    </tr>
    <tr>
      <th>Header with extra line
        <br/>&nbsp;</th>
    </tr>
    <tr>
      <th>Normal Header</th>
    </tr>
    <tr>
      <th>Normal with extra line
        <br/>&nbsp;</th>
    </tr>
    <tr>
      <th>Normal Header</th>
    </tr>
    <tr>
      <th>Normal Header</th>
    </tr>
  </table>
</div>
<div class="table-fixed-right">
  <table>
    <tr>
      <th>Header</th>
      <th>Another header</th>
      <th>Header</th>
      <th>Header really really really really long</th>
    </tr>
    <tr>
      <td>Info Long</td>
      <td>Info
        <br/>with second line</td>
      <td>Info
        <br/>with second line</td>
      <td>Info Long</td>
    </tr>
    <tr>
      <td>Info Long</td>
      <td>Info Long</td>
      <td>Info Long</td>
      <td>Info Long</td>
    </tr>
    <tr>
      <td>Info
        <br/>with second line</td>
      <td>Info
        <br/>with second line</td>
      <td>Info
        <br/>with second line</td>
      <td>Info</td>
    </tr>
    <tr>
      <td>Info</td>
      <td>Info</td>
      <td>Info</td>
      <td>Info</td>
    </tr>
    <tr>
      <td>Info</td>
      <td>Info</td>
      <td>Info</td>
      <td>Info</td>
    </tr>
  </table>
</div>

Hope this helps anyone!

Scroll HTML table horizontal and vertical while left column is fixed

2 Answers2

Linked