Aller au contenu

Problème De Css


Sigfrodi

Messages recommandés

Voilà, j'aurai voulu définir des styles CSS spécifiques à chacune des colonnes de mes tableaux html... J'espérais (avec beaucoup de doutes) pouvoir le faire en créant des définitions de colonnes (avec colgroup et col) mais malheureusement mon style n'est pas interprété...

ex (fictif) :

dans ma CSS :

.col1{

background-color: #CCCCCC;

}

.col2{

background-color: #FFFFFF;

}

dans ma page :

<table>

<colgroup>

<col class="col1" />

<col class="col2" />

<col class="col1" />

<col class="col2" />

</colgroup>

<tr>

<td>bidule</td>

<td>machin</td>

<td>bidule</td>

<td>machin</td>

</tr>

etc...

Quelqu'un a t'il une idée ou suis obligé d'encoder pour chaque td??? Bon vu qu'ils sont générés par un script ça prendrait pas de temps mais c'est un peu nul...

Lien vers le commentaire
Partager sur d’autres sites

Quelqu'un a t'il une idée ou suis obligé d'encoder pour chaque td??? Bon vu qu'ils sont générés par un script ça prendrait pas de temps mais c'est un peu nul...

A priori oui, t'es obligé -_-

Enfin moi j'ai pas trouvé d'autres solutions, mais bon, suis pas un dieu en CSS :D

Lien vers le commentaire
Partager sur d’autres sites

J'veux pas dire de connerie mais il me semble que les gestions des colonnes ne sont pas supportées en CSS2, tout simplement. Je dis ça parce qu'il me semble avoir vu dans les specs des CSS3 que justement, la gestion des colonnes serait supportée.

EDIT :

Alors en fait, ça viendrait peut-être de ton DOCTYPE, car en l'enlevant, ça m'a annulé l'effet de la feuille de style.

Ce qui marche dans mon exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css" media="all">
table{ border:1px solid #000; width:450px; }
.col1{ background:#ccc; width:5%; }
.col2{ background:#fc0; width:90%; }
</style>
</head>
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col1" />
</colgroup>
<tbody>
<tr>
 <td>:)</td>
 <td>:))</td>
 <td>:)))</td>
</tr>
<tr>
 <td>Si</td>
 <td>fro</td>
 <td>di</td>
</tr>
</tbody>
</table>
<body>
</body>
</html>

Et en enlevant

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hop magie ça ne fonctionne plus.

post-1-1119617727_thumb.jpg

Modifié par The Jedi
Lien vers le commentaire
Partager sur d’autres sites

Alors en fait, ça viendrait peut-être de ton DOCTYPE, car en l'enlevant, ça m'a annulé l'effet de la feuille de style.

Ah , c'était bien ça, je me suis planté dans ma déclaration DOCTYPE -_- J'aurai jamais pensé à chercher de ce côté là... Merci! :D

Lien vers le commentaire
Partager sur d’autres sites

Invité -Nicolas-
J'veux pas dire de connerie mais il me semble que les gestions des colonnes ne sont pas supportées en CSS2, tout simplement. Je dis ça parce qu'il me semble avoir vu dans les specs des CSS3 que justement, la gestion des colonnes serait supportée.

La gestion des colonnes en CSS3 n'a rien à voir avec les colonnes d'un tableau. C'est en fait la possibilité de créer des fausses colonnes pour avoir par exemple la même mise en page que les journaux papier avec le texte découpé en 2, 3, ... colonnes.

Ah la magie du doctype ! Comment faire passer les navigateurs du mode de rendu strict (avec doctype) au quirk mode (sans doctype). Attention en jouant avec, le résultat peut être aléatoire suivant les navigateurs, versions des navigateurs voire même OS.

Un petit script JavaScript pour Zébrer les tableau : http://marcarea.com/tuto/zebrer.php

Tout simple et bien pratique !

Lien vers le commentaire
Partager sur d’autres sites

Rejoindre la conversation

Vous pouvez publier maintenant et vous inscrire plus tard. Si vous avez un compte, connectez-vous maintenant pour publier avec votre compte.

Invité
Répondre à ce sujet…

×   Collé en tant que texte enrichi.   Coller en tant que texte brut à la place

  Seulement 75 émoticônes maximum sont autorisées.

×   Votre lien a été automatiquement intégré.   Afficher plutôt comme un lien

×   Votre contenu précédent a été rétabli.   Vider l’éditeur

×   Vous ne pouvez pas directement coller des images. Envoyez-les depuis votre ordinateur ou insérez-les depuis une URL.

Chargement
×
×
  • Créer...

Information importante

By using this site, you agree to our Conditions d’utilisation.