Frozen first column with css not working into ionic

Hi !

I have a large dataset and need to frozen the first column of a html table as well as the first row. So i can scroll right and at the bottom and see from where the data belongs to.

I try a pure css solution that works into the browser but into the smatphone does not, the first cell does not freeze .

Is there a way to do it using some Ionic diretive ?

I try this code :

<!DOCTYPE html>
        div {
  width: 300px;
  overflow-x: scroll;
  margin-left: 50px;
  overflow-y: visible;
  padding-bottom: 1px;
td {
  padding: 0 40px;
      <td style="position:absolute;width:50px; left:0;">fr1</td>
      <td style="position:absolute;width:50px;left:0; ">fc1</td>
      <td style="position:absolute;width:50px;left:0; ">fc2</td>

If I understood you correctly you want a sticky table field.

It’s possible to create such a feature but I never so anything similar to that.

i try to remove the ion-scroll directive, still have not the desired behaviour. seems the old plain html css conflicts with ion-content

This thread may help: Data table/grid - Two "ion-scroll" within the same "ion-content"

1 Like