Frozen first column with css not working into ionic

ionic-v1
1

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>
<html>
<head>
    <style>
        div {
  width: 300px;
  overflow-x: scroll;
  margin-left: 50px;
  overflow-y: visible;
  padding-bottom: 1px;
}
td {
  padding: 0 40px;
}
    </style>
</head>
<body>
    <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>    
</body>
</html>
2

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.

3

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

4

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

1 Like