web-dev-qa-db-fra.com

L'élément colgroup de la table HTML ne fonctionne pas?

Je veux des styles différents sur chaque colonne d'un tableau. J'ai lu que vous pouviez le faire en utilisant <colgroup> ou <col>, mais je n'ai pas eu de chance. J'ai un exemple ici , et rien ne semble changer. Est-ce que je fais quelque chose de mal? Est-ce que cela fonctionnera sur xhtml?

Je sais que je pourrais ajouter un attribut "classe" sur chaque <td>, mais cela semble faible.

htmlcsshtml-table
30
pleasedontbelong

C'est correct. Alors que colgroup lui-même est pris en charge par tous les navigateurs, ce n'est pas vrai pour les attributs de l'élément interne col . Parmi les attributs possibles, seul width est pris en charge sur tous les navigateurs. Mais contrairement à CSS, <col width=""> uniquement pris en charge les largeurs de pixels et de pourcentages.

Ne l'utilisez pas. À la place, créez des classes CSS et affectez-les à chaque td. Oui, ça craint.

[~ # ~] modifier [~ # ~] Lien mis à jour ci-dessus pour une page avec de meilleures informations

36
Aaron Digulla

Définissez votre table-layout à auto au lieu de fixe ...

table {table-layout: auto;}

Mon site personnel prend en charge plusieurs thèmes et je vois constamment ce genre de différences.

6
John

Vous pouvez utiliser des sélecteurs css pour obtenir des résultats similaires sans ajouter de classes supplémentaires.

Par exemple, si vous souhaitez donner un style spécifique à une deuxième colonne, vous pouvez utiliser:

table>tbody>td:nth-child(2){font-weight: bolder;}
1
ramjamx

Si vous avez vraiment besoin d'utiliser des balises cols sans restriction de réaction, dangerouslySetInnerHTML vous aidera:

<colgroup dangerouslySetInnerHTML={{
  __html: `
    <col style="background: red;"/>
    <col style="width: 20px;"/>
  `
}}/>

Notez que bien que cela fonctionne, ce n'est pas la façon recommandée de travailler avec react.

0
Soufiane Ghzal

Je viens donc d'avoir ce même problème ... le vrai problème est que même lorsque des classes CSS sont utilisées plutôt que des attributs HTML, vous ne pouvez toujours styliser que les choses suivantes:

  • largeur
  • limites
  • couleurs de fond
  • visibilité

Source: https://www.w3.org/TR/CSS21/tables.html#columns

0
Rob Kovacs