Visualizzazione dei risultati da 1 a 4 su 4

Discussione: CSS TR

  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2012
    Messaggi
    23

    CSS TR

    Ciao a tutti,
    ho questo problemino. In una tabella html dovrei applicare uno stile alle righe in base ad un valore che cambia (la tabella arriva da codice php).
    Esempio:
    se il valore di riferimento � 0 (zero) dovrei applicare lo sfondo nero e il font bianco a tutta la riga
    se il valore di riferimento � -1 dovrei applicare lo sfondo rosso e il testo nero

    come imposto il file css di conseguenza?

    io pensavo una cosa del genere:
    codice:
          tr.nero, td
          {
            background: #000000;
            color: #FFFFFF;
          }
          
          tr.normale, td
          {
            background-color: #FF0000;
            color: #000000;
          }
    che richiamo cos�:
    codice HTML:
            <tr class="nero">
              <td>TEST NERO</td>
            </tr>
            <tr class="normale">
              <td>TEST NORMALE</td>
            </tr>
    solo che ottengo tutto secondo la seconda classe.

    Grazie
    Ultima modifica di KillerWorm; 01-03-2017 a 01:22 Motivo: tag code

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2017
    Messaggi
    117
    Se la tabella ti arriva da codice php (suppongo tramite echo) basta separare l'echo in due parti ed inserire uno switch. Esempio:
    Codice PHP:
    echo "<table>";

    switch (
    $ilTuoValoreDiRiferimento) {
     case 
    "nero"
      echo 
    "<tr class='nero'>";
      break;
     case 
    "giallo":
      echo 
    "<tr class='giallo'>";
      break;
     default:
      echo 
    "<tr class='normale'>";
    }

    echo 
    "<td>contenuto cella</td></tr></table>"

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,675
    solo che ottengo tutto secondo la seconda classe.
    Ciao, a parte la risposta di fluxKami, il problema che lamenti è dato dal fatto che forse stai erroneamente usando la virgola dove non serve:
    codice:
          tr.nero, td
          {
            background: #000000;
            color: #FFFFFF;
          }
          
          tr.normale, td
          {
            background-color: #FF0000;
            color: #000000;
          }
    Fai attenzione, la virgola serve per specificare più selettori differenti in modo da poter associare, per ognuno, le stesse regole definite nel blocco tra parentesi graffe.

    In particolare il td, che tu hai indicato dopo la virgola, è da considerarsi un selettore a sé, su ciascuna delle due definizioni.
    Sostanzialmente quel css significa questo:
    codice:
          tr.nero, td    /* per tutti i tr che hanno classe .nero, e per tutti i td */
          {                /* applica le seguenti regole */
            background: #000000;
            color: #FFFFFF;
          }
         
          tr.normale, td /* per tutti i tr che hanno classe .normale, e per tutti i td */
          {                 /* applica le seguenti regole */
            background-color: #FF0000;
            color: #000000;
          }
    Ovviamente tutti i td risulteranno con sfondo rosso e testo nero, perché vale l'ultima delle due definizioni indicata per il selettore td.

    Mi pare evidente che tu stia facendo confusione. Il tuo intento non è quello di attribuire delle regole a tutti i td (in modo generico), ma piuttosto selezionare i relativi td che stanno dentro un determinato tr.

    Chiaramente puoi fare in diversi modi a seconda delle esigenze.

    Puoi semplicemente eliminare le virgole:
    codice:
    tr.nero td { ... }
    In questo modo viene selezionato qualsiasi td discendente (anche se non diretto) di tr.nero.

    Puoi usare il selettore figlio (discendente diretto):
    codice:
    tr.nero>td { ... }
    Potresti addirittura non indicare il td:
    codice:
    tr.nero { ... }
    In qusto modo background-color viene attribuito direttamente al tr mentre il color è una proprietà ereditaria, per cui ricade sui td contenuti.




    [Mod]
    Quando si posta del codice sul forum, è opportuno utilizzare gli appositi tag di formattazione, principalmente per una questione di leggibilità (vedi regolamento di sezione). Grazie. Per stavolta ho provveduto io ad aggiungerli sul tuo post.

    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2012
    Messaggi
    23
    Ho capito proverò questa ultima soluzione.
    Grazie anche per la formattazione del post

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.