Sfondo di un colore solo per la prima riga di una tabella

[radiodelmomento]

Ciao a tutti!
Vi faccio subito vedere un'immagine per farvi capire meglio.

Al posto di quel colore (blu scuro) dove è segnato vorrei rendere lo sfondo bianco.
I bordi sono arrotondati con il CSS (border-radius).
Lo sfondo è applicato a tutta la tabella.
Grazie.

[karl94]

L'indirizzo della pagina?

[radiodelmomento]

Radio Lucus - Classifica
Grazie.

[karl94]

Non ho capito bene come vuoi che sia, così: o così?

[radiodelmomento]

Per il primo basta cambiare il colore di sfondo della tabella, mentre vorrei che fosse come il secondo.
Se si può dovrei fare la stessa cosa in basso.
Ciao!

[karl94]

Ti conviene: levare lo sfondo alla tabella e applicarlo all'elemento padre (il modulo), applicare su quest'ultimo un margine superiore ed inferiore pari al raggio dei bordi arrotondati, ed infine applicare gli stessi margini (ma negativi) alla tabella.

[radiodelmomento]

Eeeeeeh?
Fino al "levare lo sfondo alla tabella" ci sono arrivato.
Il modulo che cosa sarebbe? La riga, la colonna o cos'altro?
Puoi farmi un esempio con un codice?
Grazie, ciao!

[karl94]

Il modulo è l'elemento form. A questo applicherai lo stile CSS

margin: 10px 0;

, mentre alla tabella

margin: -10px 0;

[radiodelmomento]

Io ho capito questo, ma non funziona.

<form style="margin: 10px 0; background:url(templates/bj_venus/images/blue/bg.png) repeat">
<table style="margin: -10px 0">

Ho capito male?

[karl94]

È corretto, però adesso non hai ancora apportato le modifiche alla pagina e non posso capire dove sia il problema.

[radiodelmomento]

Scusami, ecco fatto [link].
Mi stavo chiedendo se potesse creare problemi tra i vari browser, magari un browser lascia uno spazio tra il form e la tabella: può essere?
Grazie, ciao!

[karl94]

Ecco la soluzione (scusa per il ritardo): Firefox è in torto, non collassa i margini adiacenti, mentre gli altri lo fanno conformemente alle specifiche.
Per risolvere hai due possibilità: la prima necessita della proprietà CSS3 background-clip (quindi non sempre disponibile), dovrai impostare lo stile del modulo così (e quello della tabella come ti ho descritto in precedenza):

padding: 10px 0;
background-clip: content-box;
background-image: url(templates/bj_venus/images/blue/bg.png)

Se non vuoi fare uso di questa proprietà devi necessariamente aggiungere un elemento HTML (un div, per esempio) contenente la tabella e contenuto nel modulo, applicare al modulo solamente il padding e lo sfondo al nostro elemento appena aggiunto.

[radiodelmomento]

Benissimo, gli unici problemi sono IE e Safari, ma mi accontenterò...
Grazie mille!

[karl94]

Non funziona sulle vecchie versioni di Safari, le ultime supportano la proprietà. Se volessi proprio avere una compatibilità maggiore dovresti usare le rispettive proprietà con i prefissi proprietari, ma per una piccolezza simile mi sembra eccessivo.