Tabelle e css

[francescocorr]

Salve a tutti, purtroppo non sono bravo con i css e mi serve una mano. Ho dei dati da tabulare e non riesco a settare bene delle proprietà sulla tabella.

Il risultato che vorrei avere è:

Una riga con i titoli nomi dei campi con un determinato sfondo ed un determinato carattere. e fin qui tutto ok.

Le righe successive sfondo bianco ed ogni colonna deve avere bordo dx e sx 1px colore grigio e fin qui tutto ok.

Adesso vorrei che al passaggio del mouse la riga mi si evidenziasse. anche questa proprietà l'ho applicata ma se applico contameporaneamente quella sulla riga e sulla colonna non vedo il risultato evidenziato. probabilmente la classe che applico alla colonna distrugge quella sulla riga.

Vi posto un pò di codice in modo da poter capire l'errore.

/***********************CSS*********************/
tr.titoli {
background:#BC0807;
font:"Times New Roman", Times, serif;
color:#000000;
}

tr.riga:hover {
   background-color:#CCCCCC;
}

td.bordi {
border-right:1px solid #CCCCCC;
background: #FFFFFF;
}

/***********************HTML*********************/
<table width="100%">
  <tr class="titoli">
    <td>Aggiungi</td>
    <td>Modifica</td>
    <td>Elimina</td>
 </tr>

<tr class="riga">
      <td class="bordi">[img]../images/Icone/add.gif[/img]</td>
    <td class="bordi">[img]../images/Iconeedit.gif[/img]</td>
    <td class="bordi"><input type="checkbox" name="elimina[]" value="<?php echo $row[0]?>" /></td>
</tr>

Dove devo correggere??

Grazie a tutti

Frank

[culsd]

HTML:

<table width="100%">
<tr class="titoli">
<td>Aggiungi</td>
<td>Modifica</td>
<td>Elimina</td>
</tr>

<tr>
<td class="bordi">[img]../images/Icone/add.gif[/img]</td>
<td class="bordi">[img]../images/Iconeedit.gif[/img]</td>
<td class="bordi"><input type="checkbox" name="elimina[]" value="<?php echo $row[0]?>" /></td>
</tr>
</table>

CSS:

tr.titoli {
background:#BC0807;
font:"Times New Roman", Times, serif;
color:#000000;
}


td.bordi {
border-right:1px solid #CCCCCC;
background: #FFFFFF;
}

td.bordi:hover {
background: #cccccc;
}

--------------------------

Ho tolto l'attributo "riga" e ho applicato l'HOVER (passaggio col mouse) a "bordi"

In pratica bisognava applicarlo a ogni cella "td"
Non so se mi spiego...

Comunque se vuoi un consiglio lavora in table-less
Ciao!

[fcaldera]

Originariamente inviato da culsd


Ho tolto l'attributo "riga" e ho applicato l'HOVER (passaggio col mouse) a "bordi"
In pratica bisognava applicarlo a ogni cella "td"
Non so se mi spiego...

ok ma piuttosto che scrivere enne volte quella classe, può lasciare il codice così com'è e scrivere

tr.riga:hover td {
background-color:#CCCCCC;
}

(che comunque non funzionerà su IE6 e inferiori)
Ciao

[culsd]

Originariamente inviato da fcaldera

tr.riga:hover td {
background-color:#CCCCCC;
}

Esatto...

[Andreau]

Intanto ti suggerisco di utilizzare dei th per i titoli invece che td, suddividendo anche la tabella nelle due sezioni <thead> e <tbody>. Questo ti serve anche per meglio usare i css.
Inoltre, ti suggerisco di leggere l'articolo Personalizzare tabelle con i CSS.
Sul fatto di usare o meno una tabella: se devi pubblicare dei dati in forma tabellare, è corretto usare una tabella, diciamo che servono proprio a questo; è invece inappropriato usarle per la struttura delle pagine.
Ciao

[francescocorr]

Grazie per le risposte e per l'articolo. Appena torno a lavoro approfondisco meglio la cosa.

Sul fatto di usare o meno una tabella: se devi pubblicare dei dati in forma tabellare, è corretto usare una tabella, diciamo che servono proprio a questo; è invece inappropriato usarle per la struttura delle pagine

Si in questo caso le tabelle le utilizzo per la tabulazione di dati in un back-office e non per i layout.

Ciao ciao e

buon anno a tutti