Dans cet article


Offres d'emploi

Tags

HTML – Figer des colonnes en CSS dans une table (Comme avec l’option figer les volets Excel)

[

]1 Souvent il peut être utile de figer des colonnes dans un tableau (table html). Pour ce faire nous allons utiliser une technique sans Javascript en CSS. Cette technique repose sur du positionnement absolu des td dans les TR et fonctionne très bien avec un tableau qui possède de nombreuses colonnes.

HTML CSS figer des colonnes comme dans Excel

HTML CSS figer des colonnes comme dans Excel ici les deux premières colonnes

 

HTML CSS figer des colonnes comme dans Excel

HTML CSS figer des colonnes comme dans Excel ici les deux premières colonnes n’ont pas bougées dans le scroll vers la droite

Figer des colonnes en CSS sur un table

Quand un tableau HTML possède de nombreuses colonnes, il est facile de créer un scroller horizontal pour naviguer dans les données vers la droite. Malheureusement, il n’est pas nativement possible de figer par exemple les deux première colonnes lors du scroll. Ce qui est facile avec l’option figer les volets d’Excel par exemple. Néanmoins, il est possible d’utiliser une petite solution en CSS pour simuler l’effet.

L’astuce repose sur un positionnement absolue des n premières colonnes (TD) (les colonnes que vous souhaitez figer).

Le tableau HTML avec deux colonnes figées comme dans Excel

Premièrement il faut construire un tableau HTML. Ici nous avons un tableau avec 4 colonnes, et nous allons figer les deux premiers colonnes

<table>
  <tr>
    <th class="header_1">
      Numéro
    </th>
    
    
    <th class="header_2">
      Col 2
    </th>
    
    
    <th  >
      Col 3
    </th>
    
    
    <th >
      Col 4
    </th>
    
  </tr>
  
  
  <tr >
    <td class="col_1">
      23694
    </td>
    
    
    <td class="col_2">
      Paul Wayne
    </td>
    
    
    <td class="col_3">
      Wayne
    </td>
    
    
    <td>
      TEST DE POSITIONNEMENT
    </td>
    
  </tr>
  
  
  <tr >
    <td class="col_1">
      23694
    </td>
    
    
    <td class="col_2">
      Paul Wayne
    </td>
    
    
    <td class="col_3">
      Wayne
    </td>
    
    
    <td>
      TEST DE POSITIONNEMENT
    </td>
    
  </tr>
  
  
  <tr >
    <td class="col_1">
      23694
    </td>
    
    
    <td class="col_2">
      Paul Wayne
    </td>
    
    
    <td class="col_3">
      Wayne
    </td>
    
    
    <td>
      TEST DE POSITIONNEMENT
    </td>
    
  </tr>
  
  
  <tr >
    <td class="col_1">
      23694
    </td>
    
    
    <td class="col_2">
      Paul Wayne
    </td>
    
    
    <td class="col_3">
      Wayne
    </td>
    
    
    <td>
      TEST DE POSITIONNEMENT
    </td>
    
  </tr>
  
  
</table>

Nous avons dans ce tableau défini des classes CSS sur les deux premières cellules (et sur les TH). header_1 et header_2, puis col_1 et col_2 puis une troisième class cole_3 pour la première colonne mobile.

Nous allons ensuite tout simplement placer les deux premières colonnes un positionnement absolute.

Il est aussi nécessaire de rajouter un bon line-height pour que les cellules passionnées en absolute prennent bien toute la hauteur. L’astuce consiste à mettre pour chaque colonne fixe la bonne largeur (ici 70 px pour la première et 200 px pour la seconde), puis de décaler avec un margin la deuxième colonne pour qu’elle vienne se mettre à côté de la première. Ceci est à répéter jusqu’à la première colonne mobile.

.header_1{
position:absolute;
line-height:41px;
width:70px;
}
.header_2{
position:absolute;
margin-left:70px;
line-height:41px;
width:200px
}
.col_1{
position:absolute;
line-height:22px;
width:70px
}
.col_2{
 position:absolute;
 margin-left:70px;
 padding-left:2px;
 line-height:22px;
 width: 200px;
 border-right:1px solid #E1E1E1;
}
.col_3{
padding-left:300px
}

 

Et voilà, avec cette petite astuce css vous avez un tableau scrollable avec des colonnes figées.

L'équipe AXOPEN

Voir aussi les articles suivants

L'ETL Talend permet de paramétrer facilement la copie d'une table vers une autre ayant la même structure. Nous parlerons dans cet article de la copie vers une table vide, où le job ne fera que des INSERT (et pas d'INSERT OR UPDATE, plus consommateur).   Une des bonnes pratiques invite à déclarer dans les jobs une première connexion vers la base source et une seconde vers la base cible, les composants étant ensuite paramétrés pour utiliser ces connexions.
Lire l'article

Audit de données : vérifier l’absence de doublons (ONB identiques) dans chaque table P5
Description Dans certains cas, lorsque l’on n’a pas positionné d’offset pour les bases de données Planisware par exemple, il peut arriver que l’on constate la présence d’objets ayant le même ONB dans une même table Planisware. Ceci est une grave corruption du modèle de données car Planisware ne sera pas en mesure de charger les 2 objets. Il en chargera un seul sur les 2 et la plupart du temps remontera une erreur indiquant que l’objet xxxx possèdant le même ONB que l’objet yyyy n’a pu être chargé.
Lire l'article

Description Il est parfois utile de générer la liste des tables de la base de données Planisware contenant une colonne ONB. De plus, la liste de ces tables n’est pas fixe car elle va dépendre de la version du noyau Planisware, de la version de Processes et du paramétrage spécifique implémenté. Requête SQL Voici une requête SQL à exécuter en étant connecté au schéma de la BDD et renvoyant la liste des tables Planisware :
Lire l'article