Data Table freeze First column

1

Hi

it’s correct to use the “sticky” property to freeze one column in Data Table ?, I use this code and I can’t achieve freezing the first column of my table, any ideas?

HTML

> <div class="page" data-name="detalle-pedido">
> 
>     <!-- NavBar  navbar-transparent  -->
> 
>     <div class="navbar" id="navbar-show-detalle-pedido">
> 
>       <div class="navbar-bg"></div>  
> 
>       <div class="navbar-inner">
> 
>         <div class="left">
> 
>           <a href="#" class="link back">
> 
>               <i class="f7-icons icon-custom">arrow_left</i>
> 
>           </a>
> 
>         </div>
> 
>         <div class="title navbar-tipo-letra" id="razon-social">Abel Rodríguez Salazar</div>
> 
>       </div>
> 
>     </div>
> 
> <!-- Bottom Toolbar -->
> 
> <div class="toolbar tabbar-labels toolbar-bottom toolbar-custom">
> 
>   <div class="toolbar-inner color-toolbar-inner">
> 
>     <!-- Toolbar links -->
> 
>     <a href="/home/" class="link my-link.active-state">
> 
>       <i class="icon f7-icons">house</i>
> 
>       <span class="tabbar-label">Inicio</span>
> 
>     </a>
> 
>     <a href="/proveedor/" class="link my-link.active-state">
> 
>       <i class="icon f7-icons">person_2_alt</i>
> 
>       <span class="tabbar-label">Proveedores</span>
> 
>     </a>
> 
>     <a href="/pedido/" class="link my-link.active-state">
> 
>       <i class="icon f7-icons">cart_fill</i>
> 
>       <span class="tabbar-label">Pedidos</span>
> 
>     </a>
> 
>     <a href="/producto/" class="link my-link.active-state">
> 
>       <i class="icon material-icons">shopping_basket</i>
> 
>       <span class="tabbar-label">Productos</span>
> 
>     </a>
> 
>   </div>
> 
> </div>
> 
>    
> 
>     <div class="page-content">
> 
>       <div class="data-table tabla-cebra" id="detalle_pedido">
> 
>         <table>
> 
>           <thead>
> 
>             <tr>
> 
>               <th class="label-cell sticky">Producto</th>
> 
>               <th class="numeric-cell">Cant.</th>
> 
>               <th class="numeric-cell">U/Med.</th>
> 
>               <th class="numeric-cell">Costo</th>
> 
>               <th class="numeric-cell">Importe</th>
> 
>             </tr>
> 
>           </thead>
> 
>           <tbody>
> 
>             <tr>
> 
>               <td class="label-cell sticky">Canal</td>
> 
>               <td class="numeric-cell">435.30</td>
> 
>               <td class="numeric-cell">Kgs.</td>
> 
>               <td class="numeric-cell">88.30</td>
> 
>               <td class="numeric-cell">38,436.99</td>
> 
>             </tr>
> 
>             <tr>
> 
>               <td class="label-cell sticky">Queso</td>
> 
>               <td class="numeric-cell">435.30</td>
> 
>               <td class="numeric-cell">Kgs.</td>
> 
>               <td class="numeric-cell">1,500.30</td>
> 
>               <td class="numeric-cell">38,436.99</td>
> 
>             </tr>
> 
>           </tbody>
> 
>         </table>
> 
>       </div>
> 
>     </div>
> 
> </div>

CSS

.tabla-cebra{
    border-style: solid; 
    border-color: #ccc;
    border: 1px;
}

.tabla-cebra thead tr{
    background: black;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.tabla-cebra th,
.tabla-cebra td{
    border-right: 1px;
    border-style: solid;
    border-color: #ccc;
}

.tabla-cebra th:last-child,
.tabla-cebra td:last-child{
    border-right: 0;
}

.tabla-cebra td{
    border-bottom: 1px;
    border-style: solid;
    border-color: #ccc;
}

.tabla-cebra tbody tr{
    background: white;
}

.tabla-cebra tbody tr:nth-child(2n){
    background: #f2f2f2;
}

.tabla-cebra sticky{
    position: sticky;
    left: 0;
}