J'ai une exigence où je dois appliquer un style conditionnel pour mes lignes de tableau mais le style n'est jamais appliqué.

.test1 {
  background-color: '#ffbf00';
}
.test2 {
  background-color: '#92D050';
}
.test3 {
  background-color: ' ';
}
<table id="testTable">
  <tr styleClass="test1">
    <td></td>
    <td></td>
  </tr>
</table>

Mais le style ne sera jamais appliqué. quelque chose me manque?

-1
sTg 16 nov. 2017 à 16:34

4 réponses

Meilleure réponse

Vous avez environ 10 erreurs dans ce code HTML. Veuillez apprendre le HTML et le CSS. Voici ce que vous pourriez souhaiter réaliser de manière correcte.

.test1 {
  background-color: #ffbf00;
}
.test2 {
  background-color: #92D050;
}
.test3 {
  background-color: transparent;
}
<table id="testTable">
  <tr class="test1">
    <td>a</td>
    <td>b</td>
  </tr>
</table>

Ne mettez pas de citations sur les couleurs. Cela signifie classe, pas styleClass. «» n'est pas une valeur de couleur valide.

1
Blackbam 18 déc. 2019 à 12:05

Vous devez ajouter le nom de la classe et la syntaxe styleClass = "test1" incorrecte

Donc mise à jour

styleClass="test1"

À

class="test1"

Et encore une chose, votre code de style n'est pas parfait, alors mettez à jour

background-color: '#92D050';

À

background-color: #92D050;

Car c'est aussi une erreur de syntaxe, l'autre code est ok

  .test1 {
        background-color: #ffbf00;
    }
    .test2  {
        background-color: #92D050;
    }
    .test3  {
        background-color: rebeccapurple;
    }
<table id="testTable">
    <tr class="test1">
        <td>test1</td>
        <td>test1</td>
    </tr>
    <tr class="test2">
        <td>test2</td>
        <td>test3</td>
    </tr>
    <tr class="test3">
        <td>test4</td>
        <td>test5</td>
    </tr>
</table>
0
Shafiqul Islam 16 nov. 2017 à 13:48

Cible vers td

.test1 td
    {
        background-color: #ffbf00;
    }
    .test2 td
    {
        background-color: #92D050;
    }
    .test3 td
    {
        background-color: none;
    }
0
Lalji Tadhani 16 nov. 2017 à 13:35

Utilisez la classe pour la définition en HTML et n'utilisez pas de guillemets autour de la valeur hexadécimale.

.test1 {
  background-color: #ffbf00;
}
.test2 {
  background-color: #92D050;
}
.test3 {
  background-color: ' ';
}
<table id="testTable">
  <tr class="test1">
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>
1
Gerard 16 nov. 2017 à 13:39
47331052