(Risolto) Tabella con righe alternate di colore diverso

[Nobody.1990]

Come da oggetto volevo sapere se vi fosse un modo per creare una tabella con righe di colore diverso alternato.
Cercando in rete ho visto che ciò può essere fatto con il comando nth-child ma essendo inesperto non so bene come si utilizza.


Nel codice seguente, come devo utilizzare il comando suddetto per ottenere le righe pari di colore rosso (e le latre lasciate bianche)



<p> </p>
<div>
<table>
<tbody>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 1</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 2</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 3</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 4</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 5</td>
</tr>
</tbody>
</table>
<p>  </p>
<p> </p>
<div class="widget">
<p><span style="font-family: 'comic sans ms', sans-serif; font-size: 10pt;">  </span> </p>
<>
<p> </p>
<p> </p>
<>




Grazie in anticpo per l'aiuto

[Francesco Di Giovanni]

Ciao 
ti consiglio di gestire meglio il width: 1500px, sarebbe meglio in percentuale tipo 100% o 80% vedi tu.
se è una tabella statica ti consiglio di inserire la proprietà background-color: #f91a09; nelle righe che vuoi di rosso
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left; background-color: #f91a09;">Riga 1</td>


se vuoi utilizzare la proprietà nth-child
inserisci

<style>
tr:nth-child(odd) {

    background-color: #f91a09;
}
</style>

è consigliabile inserirlo in un file css del tuo template


il parametro even riguarda le righe pari, per le righe dispari odd


 

[Nobody.1990]

Ciao Francesco, ti ringrazio per la risposta.
Ho corretto il width come da te suggerito.


Per quanto riguarda la proprietà nth-child è possibile inserirla direttamente nel codice/esempio che ho postato prima invece di doverlo inserire nel CSS del template?


In tal caso vorrei gentilmente sapere dove va inserito (perdonami ma non ho mai avuto a che fare con i codici di programmazione). Ho provato ad inserirlo come di seguito ma evidentemente è sbagliato.



<p> </p>
<div>
<table>
<tbody>
<style>
tr:nth-child(odd) {
    background-color: #f91a09;
}
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 1</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 2</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 3</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 4</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 5</td>
</tr>
</style>
</tbody>
</table>
<p>  </p>
<p> </p>
<div class="widget">
<p><span style="font-family: 'comic sans ms', sans-serif; font-size: 10pt;">  </span> </p>
<>
<p> </p>
<p> </p>
<>



Ti ringrazio di nuovo

[Francesco Di Giovanni]

prova cosi





<style>
tr:nth-child(odd) {
    background-color: #f91a09;
}
</style>


<table>
<tbody>


<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 1</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 2</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 3</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 4</td>
</tr>
<tr>
<td style="width: 1500px; height: 25px; border-bottom: 1px solid #000000; text-align: left;">Riga 5</td>
</tr>


</tbody>
</table>

[Nobody.1990]

Purtroppo non funziona.


Si crea la tabella classica ma senza colori alternati.   

[giusebos]

che strade astruse che date certe volte, un sola regola css da aggiungere al css del template risolverebbe.

Gli stili in linea sono solo un grande immenso casino se non si sa cosa si sta facendo.

qui un esempio
https://www.w3.org/Style/Examples/007/evenodd.en.html

la regola css andrà riscritta secondo il nome che ha il tuo elemento

[conti1]

ciao
funziona lo provato io  quello di @francesco solo che tu  sbagli in una cosa metti il css  nel modulo o nell'articolo e ti viene cancellato
metti questo in qualsiasi  foglio css che  hai nel template


tr:nth-child(odd) {
    background-color: #f91a09;
}

[Nobody.1990]

Ciao, hai ragione funziona.
Una curiosità: come mai mettendo il CSS nell'articolo viene cancellato? C'è un modo per non farlo cancellare?




Ringrazio tutti per il vostro aiuto.

[conti1]

joomla cancella in automatico il codice  "diciamo pulisce" ma in teoria non e joomla ma l'editor che fa pulizia del code che per lui  e strano.
 èer evitare tutto cio devi disabilitare leditor , oppure installare un plugin tipo questo

[Nobody.1990]

Capito.
Grazie