Largeur de colonne après un colspan

Campy73 Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
Bruno83200_6929 Messages postés 608 Date d'inscription   Statut Membre Dernière intervention   -

Bonjour,

J'essai de changer la largeur de mes colonnes après avoir fait un colspan juste avant mais ca ne fonctionne pas.  Si je place ma ligne colspan après, tout fonctionne.


Windows / Chrome 137.0.0.0

A voir également:

1 réponse

Bruno83200_6929 Messages postés 608 Date d'inscription   Statut Membre Dernière intervention   126
 

Bonjour,

Pour que les largeurs des colonnes fonctionnent correctement, suivez ces étapes :
Définir les largeurs des colonnes en premier :
Utilisez la balise <colonel> ou des styles CSS pour définir explicitement les largeurs des colonnes avant d'appliquer le Colspan.

Exemple avec <colonel> :

<table>
  <colgroup>
    <col style="width: 100px;">
    <col style="width: 200px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <td colspan="2">Cellule fusionnée</td>
    <td>Cellule normale</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

Utiliser CSS pour plus de contrôle :
Si vous utilisez des styles CSS, appliquez les largeurs directement aux cellules (< > ou <ème>) ou utilisez une classe pour contrôler la largeur.

Exemple :

<style>
  .col1 { width: 100px; }
  .col2 { width: 200px; }
  .col3 { width: 150px; }
</style>
<table>
  <tr>
    <td class="col1" colspan="2">Cellule fusionnée</td>
    <td class="col3">Cellule normale</td>
  </tr>
  <tr>
    <td class="col1">Col 1</td>
    <td class="col2">Col 2</td>
    <td class="col3">Col 3</td>
  </tr>
</table>

Éviter les conflits avec Colspan :
Assurez-vous que les cellules avec Colspan ne perturbent pas la grille. Par exemple, si une cellule s'étend sur deux colonnes, la somme des largeurs des colonnes concernées doit être cohérente avec la largeur totale de la cellule fusionnée.

Si vous rencontrez des problèmes, essayez de définir une largeur explicite pour la cellule avec Colspan via CSS :

td[colspan="2"] {
  width: 300px; /* Somme des largeurs des colonnes 1 et 2 */
}

Tester avec un tableau simple :
Si le problème persiste, simplifiez votre tableau pour isoler le problème. Vérifiez si les largeurs fonctionnent correctement sans Colspan, puis ajoutez progressivement les fusions de cellules.
 

Exemple fonctionnel
Voici un exemple complet où les largeurs sont définies avant le Colspan :
 

<table border="1">
  <colgroup>
    <col style="width: 100px;">
    <col style="width: 200px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <td colspan="2">Fusion de 2 colonnes</td>
    <td>Colonne 3</td>
  </tr>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
  </tr>
</table>

 Suivant le navigateur, il se peut que les largeurs ne s'appliquent pas correctement, essayez de définir disposition de la table : fixe ; sur le tableau pour

forcer les largeurs des colonnes :

table {
  table-layout: fixed;
  width: 100%; /* Ou une largeur fixe */
}

Bon courage !

0