Comment construire une table complexe en utilisant CSS?

Question

Récemment, je suis tombé sur une mise en œuvre de table complexe, par exemple:

tr1: | td1 | td2 | td3 | 
tr2: | th | td | 
tr3: | th | td | 
... 

Comme le montre cet exemple, je veux TD1 et TD3 ont une largeur fixe, td et dv2 sont automatiquement la largeur d'étendre lorsque l'écran radio/browser- la largeur a changé. Je me demande s'il existe un moyen de le faire en utilisant CSS? Pour être clair, j'ai déjà utilisé colspan et la valeur de largeur pour mon but, mais comment puis-je rendre td1 plus petit que th en utilisant colspan et la valeur de largeur? colspan ne fonctionne pas, ni la valeur de largeur

Answer 1

Il suffit de régler correctement les coupelles.

Rangée d'en-tête de table: Chaque cellule obtient un colspan de 2 (3 cellules * 2 colspan = 6 cellules de colspan).
Lignes de corps de table: Chaque cellule obtient un colspan de 3 (2 cellules * 3 colspan = 6 cellules de colspan).

MISE À JOUR

Il semble y avoir une incohérence qui implique des colonnes ayant à la fois et colspan ensemble largeur. Les navigateurs semblent ignorer la valeur de largeur et même la largeur maximum (la largeur minimale fonctionne).

Exemple:

<table border="1" style="width: 50%;"> 
    <tr> 
     <td style="width: 100px;">td1</td> 
     <td colspan="2">td2</td> 
     <td style="width: 100px;">td3</td> 
    </tr> 
    <tr> 
     <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th> 
     <td colspan="2">td2</td> 
    </tr> 
    <tr> 
     <th colspan="2" style="min-width: 120px; max-width: 120px; width: 120px;">th1</th> 
     <td colspan="2">td2</td> 
    </tr> 
</table> 

On obtient ainsi à peu près la sortie désirée mais la th1 ème colonne augmente pour correspondre à la même taille de la td suivante (TD2). Les deux occupent toujours 50% de la table sauf si la table est inférieure à 240px, th1 reste à 120px. Cela semble incompatible avec moi et je n'ai aucune solution de contournement, le mieux est de vérifier si vous pouvez afficher la table différemment (c'est-à-dire le même nombre de colonnes dans toutes les lignes, y compris l'en-tête).

Answer 2

Si vous ne spécifiez pas de largeur pour un td, leur largeur augmentera automatiquement en fonction de son contenu. En outre, vous pouvez utiliser le colspan pour égaliser un td à ce que vous aimez ...

Answer 3

De cet exemple limité, il me semble que vous avez besoin de deux tables.

Un pour la rangée supérieure (définir explicitement la largeur de TD1, TD3, et la table entière. Laissez étendre auto dv2.

et un pour le reste de la table ... le format comme vous s'il vous plaît, il suffit de définir la largeur de la table à la même hauteur que la rangée supérieure de sorte qu'il ressemble comme une table.Vous devrez probablement définir 0 marges/padding

Cela, ou vous pourriez en faire une table et faire un peu de colspan

Answer 4

Toutes les cellules d'une colonne ont la même largeur Pour que les cellules s'étendent sur plusieurs colonnes, utilisez colspan attribut. Toutes les cellules d'une rangée combinées se développeront pour remplir toute la largeur de la table.

Answer 5

Essayez ces colspans:

tr1: | td1(1) | td2(2) | td3(1) | 
tr2: | td1(2) | td2(2)  | 
tr3: | td1(2) | td2(2)  | 
...