Format de colonne de table

StackOverflow https://stackoverflow.com/questions/157770

  •  03-07-2019
  •  | 
  •  

Question

J'essaie de formater une colonne dans un <table/> en utilisant un élément <col/>. Je peux définir background-color, width, etc., mais je ne peux pas définir le font-weight. Pourquoi ça ne marche pas? 

<table>
    <col style="font-weight:bold; background-color:#CCC;">
    <col>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
Était-ce utile?

La solution

Pour autant que je sache, vous pouvez uniquement formater les éléments suivants à l'aide de CSS sur l'élément <col>:

  • couleur de fond
  • bordure
  • largeur
  • visibilité

Cette page contient plus d'informations.

Herb a raison - il est préférable d’appeler directement les <td>. Ce que je fais est le suivant: 

<style type="text/css">
   #mytable tr > td:first-child { color: red;} /* first column */
   #mytable tr > td:first-child + td { color: green;} /* second column */
   #mytable tr > td:first-child + td + td { color: blue;} /* third column */
   </style>
   </head>
   <body> 
   <table id="mytable">
    <tr>
      <td>text 1</td>
      <td>text 2</td>
      <td>text 3</td>
    </tr>
    <tr>
      <td>text 4</td>
      <td>text 5</td>
      <td>text 6</td>
    </tr>
    </table>

Cela ne fonctionnera cependant pas dans IE.

Autres conseils

Votre meilleur choix est d'appliquer votre style directement aux balises <td>. Je n'ai jamais utilisé la balise <col>, mais la plupart des navigateurs vous permettent d'appliquer le formatage au niveau <table> et <th> / <=>, mais pas à un niveau intermédiaire. Par exemple, si vous avez 

<table>
    <tr class="Highlight">
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

alors ce CSS ne fonctionnera pas 

tr.Highlight { background:yellow }

mais cela 

tr.Highlight td { background:yellow }

Aussi: je suppose que votre code ci-dessus est uniquement destiné à la démonstration et que vous n'allez pas réellement appliquer de styles en ligne.

Vous en avez peut-être simplement besoin: 

tr td:first-child label {
    font-weight: bold;
}

En lisant ceci, j’essayais de styler un tableau de sorte que la première colonne soit en gras et les quatre autres colonnes en texte normal. Utiliser la balise col semblait être la solution, mais bien que je puisse définir la largeur des colonnes avec l'attribut width, font-weight: bold ne fonctionnerait pas Merci de m'avoir indiqué la direction de la solution. En stylant tous les éléments td td {font-weight: bold;}, puis en utilisant un sélecteur de fratrie adjacent pour sélectionner les colonnes 2 à 5 et les redonner à la normale td + td {font-weight: normal;} Voilà, tout va bien:)

Avez-vous essayé d'appliquer le style via une classe CSS?

Ce qui suit semble fonctionner: 

<style type="text/css"> 
  .xx {
  background: yellow;
  color: red;
  font-weight: bold;
  padding: 0 30px;
  text-align: right;
}

<table border="1">
  <col width="150" />
  <col width="50" class="xx" />
  <col width="80" />
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
</tbody>
</table>

Référence pour l'élément col

Une balise col doit figurer à l'intérieur d'une balise colgroup. Cela peut être lié au problème.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top