Frozen first table HTML column with CSS or Angularjs [duplicate]

Question

I have a table where i would like to have the first column and if possible the first row also frozen

So i can have a very large dataset and see from where the data belongs to

I try to use style="position: fixed", also absolute, none of them works.

So dsr1, dsr2,dtr1 etc.. can scroll and fr1, frw2, fc1, fc2 would stay fixed.

-------------------------
fr1 | frw2 |frw3 |frw4 |
---------------------
fc1 | dsr1 |dsr2 |dsr3 |
---------------------
fc2 | dtr1 |dtr2 |dtr3 |

Try, but did not work:

-------------------------
fr1 style="position:fixed "| frw2 |frw3 |frw4 |
---------------------
fc1 | dsr1 |dsr2 |dsr3 |
---------------------
fc2 | dtr1 |dtr2 |dtr3 |

Did you try building the frozen part in one DIV and the scrollable into another DIV? — Paulo Pedroso
– Paulo Pedroso, Commented Aug 20, 2015 at 11:55

Chamika Sandamal · Accepted Answer · 2015-08-20 12:29:04Z

3

You can try this,

div {
  width: 300px;
  overflow-x: scroll;
  margin-left: 50px;
  overflow-y: visible;
  padding-bottom: 1px;
}
td {
  padding: 0 40px;
}

<div>
  <table>
    <tr>
      <td style="position:absolute;width:50px; left:0;">fr1</td>
      <td>frw2</td>
      <td>frw3</td>
      <td>frw4</td>
    </tr>
    <tr>
      <td style="position:absolute;width:50px;left:0; ">fc1</td>
      <td>dsr1</td>
      <td>dsr2</td>
      <td>dsr3</td>
    </tr>
    <tr>
      <td style="position:absolute;width:50px;left:0; ">fc2</td>
      <td>dtr1</td>
      <td>dtr2</td>
      <td>dtr3</td>
    </tr>
  </table>
</div>

Demo

answered Aug 20, 2015 at 12:29

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ângelo Rigo Over a year ago

This solution is much more simple and work´s fine.

Collectives™ on Stack Overflow

Frozen first table HTML column with CSS or Angularjs [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related