Frozen first table HTML column with CSS or Angularjs

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, Aug 20 '15 at 11:55

score 3 · Accepted Answer · answered Aug 20 '15 at 12:29

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

This solution is much more simple and work´s fine. – Ângelo Rigo Aug 20 '15 at 13:45 — Ângelo Rigo, Aug 20 '15 at 13:45

Frozen first table HTML column with CSS or Angularjs

1 Answers1