Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

colgroup

12 réponses
Avatar
romer
Hi,

Je viens d'essayer d'utiliser la balise <colgroup>
Voilà le html:

<colgroup> /*4 colonnes*/
<col id="c19"><col id="c27"><col id="c27"><col id="c27">
</colgroup>

<!-- ************** Rangée 1 ************** -->
<tr>
<td>Date</td><td>1res L</td><td>1res ES</td><td>1res S</td>
</tr>

c19 signifie 19% de la largeur totale et c27, 27% comme le montre le
css. Le total faisant 100%.

#c19{width:19%;} /* 1re col=19% */
#c27{width:27%; /* 2e,3e,4e col=27% + bleu */
color:#00f;}

Suivent des dizaines de rangées...

Cela fonctionne bien pour la largeur différente des 4 colonnes mais
hélas, la couleur du texte de la 1re (bleu pur) ne fonctionne pas.
Je pensais le contraire.

C'est normal ou c'est moi qui ai mis sans doute plus d'espoir en elle
qu'il ne le fallait ?

Merci.
--
A+

Romer

2 réponses

1 2
Avatar
SAM
Le 1/5/09 7:02 PM, Bernd a écrit :

C'est vrai que, énervé par le comportement chroniquement erratique de
IE, je suis allé un peu vite. Elle est comprise mais mal...
Les modifs de largeur de col dans colgroup ne sont pas prises en compte
sauf dans la beta8. Autement dit dans IE 7 et 8, si je pose :

<colgroup>
<col class="c19"><col class="c27"><col class="c27"><col class="c27">
</colgroup>

les 4 colonnes ont la même largeur alors que la 1re est plus étroite
dans tous les autres navigateurs (sauf les antiquités graves).



Encore une fois je m'inscris en faux quant à ceci !
IE sait régler la largeur de <col> (en tous cas mes IE à moi)
Il sait même colorer le texte de <col>
alors que Fx non (puisque ce n'est pas prévu chez W3C)


Voici qui donne le même résultat dans mon IE et mon Fx
(la 2ième table)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test table et col - css et html</title>

<style type="text/css">

/* pour navigateur pas trop bête */
tr td:first-child { color: blue; }
tr td+td { text-align: center; }
tr td+td+td { text-align: right; }

</style>
</head>
<body>
<h1>css pour styler les TDs (!IE)</h1>
<p>Jouer avec ce fichier en enlevant et remettant les css du head<br>
à voir dans IE et dans autres brouteurs</p>

<table border="1">
<caption>table pour IE (width et align en HTML)</caption>
<col width="15%">
<col width="55%" align="center">
<col width="30%" align="right">
<tr>
<td>_Row_1_Cell_1_</td>
<td>_Row_1_Cell_2_</td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr>
<td>_Row_2_Cell_1_</td>
<td>_Row_2_Cell_2_</td>
<td>_Row_2_Cell_3_</td>
</tr>
<tr>
<td>_Row_3_Cell_1_</td>
<td>_Row_3_Cell_2_</td>
<td>_Row_3_Cell_3_</td>
</tr>
</table>

<table border="1">
<caption>table dont col avec styles (IE)</caption>
<col style="width:15%; color: blue">
<col style="width:55%; text-align: center">
<col style="width:30%; text-align: right">
<tr>
<td>_Row_1_Cell_1_</td>
<td>_Row_1_Cell_2_</td>
<td>_Row_1_Cell_3_</td>
</tr>
<tr>
<td>_Row_2_Cell_1_</td>
<td>_Row_2_Cell_2_</td>
<td>_Row_2_Cell_3_</td>
</tr>
<tr>
<td>_Row_3_Cell_1_</td>
<td>_Row_3_Cell_2_</td>
<td>_Row_3_Cell_3_</td>
</tr>
</table>

</body>
</html>



Fx.3 obéit aux css du head et aux styles autorisés dans les COLs
IE.6 n'obéit qu'aux styles (quels qu'ils soient) des COLs
IE.7 obéit aux css du head comme Fx.3,
mais aussi aux styles non admis des COLs

La présence ou non des balises colgroup n'influe pas sur la démo.

Les 3 respectent les largeurs demandées.
(la largeur de la table est calculée relativement à la colonne 1)
Bien sûr il ne faut pas afficher en police "la plus élevée"
mais "la plus petite"
pour que ça fonctionne "bien" dans les IE !

IE6: <http://cjoint.com/?bgavVw6eDK>
IE7: <http://cjoint.com/?bgaw344hNH>
FX3: <http://cjoint.com/?bgaxwbcNKz>

Je continue à obtenir l'exact même résultat dans les trois navigateurs
si j'utilise des class pour styler les COLs :
<http://cjoint.com/?bgaJRxz4yQ>


Voir les différents modes de calcul de largeur des tables :
<http://www.yoyodesign.org/doc/w3c/css2/tables.html#width-layout>

--
sm
Avatar
Pierre Goiffon
Olivier Miakinen wrote:
Par contre je crois me rappeler que l'on ne peut appliquer que certaines
modifications de styl sur colgroup non ?



Oui, cf. les réponses de SAM et de bruno666.



Gaspe après relecture encore plus attentive des messages de ce fil, oui
Stéphane donnait le lien dans <49551778$0$18369$
Diable, même après les vacances...
1 2