ho trovato qui
http://www.webmasterpoint.org/webdes...-verticale.asp
una soluzione semplice (so fare solo cose semplici) per ottenere un elenco che scorra a colori alternati. Purtroppo, i link dal sito di provenineza non sono attivi o non rispondono, perciò provo qui.
Il css, con le modifiche che mi servivano, e riportato qui sotto:
Su web, il risultato è visibile qui: http://www.circuitoverde.net/Produttori/vetrere_gui.htm
Il problema che non riesco a risolvere è di determinare la larghezza delle colonne della tabella2 che, qualsiasi valore io dia, restano sempre 3 colonne uguali tra di loro.
Grazie
Stefano
/************************************************** *********************************************/
/* Tabellauno è la "tabella cornice" */
/************************************************** *********************************************/
.tabellauno {
width:760px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin:0 auto;
padding:0;
/*background:#00a3dd;*/ /* colore dello sfondo del bordo ESTERNO della tabella
background:#707070; */
background: transparent ;
color: #008000; /* colore dei caratteri dei titoli */
border: Solid 1px #555555;
}
/*
.tabellauno th#header1, .tabellauno th#header2, .tabellauno th#header3, .tabellauno th#header4 {
width: 253px; /* larghezze delle singole colonne, se le voglio tutte uguali.
text-align:center; /* allineamento dei titoli
padding-left:0.5em;
}
*/
.tabellauno th#header1{
width: 290px; /* larghezze delle singole colonne */
text-align:left; /* allineamento dei titoli */
padding-left:0.5em;
}
.tabellauno th#header2 {
width: 240px;
text-align:left; /* allineamento dei titoli */
padding-left:0.5em;
}
.tabellauno th#header3 {
width: 200px;
text-align:left; /* allineamento dei titoli */
padding-left:0.5em;
}
.tabellauno th#header4 { /* questa serve a riempire lo spazio che a dx sarà occupato dalla barra, quando apparisse */
width: 30px;
text-align:center; /* allineamento dei titoli */
padding-left:0.5em;
}
/* Titolo generale in testa a tutto */
.tabellauno caption {
/*background:#fff;
background: red ;*/
background: transparent ;
color:#548888;
/*font-size:1.2em;*/
font-size:1.2em;
margin:0 auto;
}
/* lo sfondo è quello della parte che sta sotto ai caratteri scritti. Il colore non l'ho capito */
.tabellauno tbody {
/*background:#8a9;
background:555555 ;*/
background: transparent ;
/*color:#000;*/
color:black;
}
/* Allineamento del contenuto della tabella */
.tabellauno td {
text-align: left;
}
/*Se diamo uno sguardo alla tabella così come l´abbiamo formattata attraverso il codice css, avremo una tabella con il colore di sfondo verde. Colore dei bordi, colore della intestazione e del footer: celeste.
La tabella appena vista è perfettamente funzionale ed accessibile.
Ovviamente i colori sono puramente indicativi e possiamo cambiarli a nostro piacimento.
Adesso dobbiamo introdurre la seconda tabella; lo faremo anche per "distinguere" il colore di ogni singolo rigo dal precedente, per una migliore leggibilità. Il suo codice è il seguente:
*/
/************************************************** *********************************************/
/* Tabelladue è la tabella dove scorrono gli item */
/************************************************** *********************************************/
/* background si riferisce al colore tra le celle. Color non so */
.tabelladue {
width:730px; /* larghezza -30 (4 colonna di tabellauno) rispetto a tabellauno */
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin:0;
padding:0;
/*color:#000;*/
color:black ;
background: transparent;
/*background: red;*/
}
/************************************************** *********************************************/
/* le 4 classi che seguono le ho aggiunte in analogia a quelle di tabellauno, con l'intenzione
di allineare la larghezza delle colonne, ma sembra che non abbiano alcun effetto*/
/************************************************** *********************************************/
/*.tabelladue td#header1{
.colonna1{*/
.tabelladue colonna1{
width: 350px; /* larghezze delle singole colonne */
text-align:center; /* allineamento dei titoli */
padding-left:0.5em;
}
/*.tabelladue td#header2 {
.colonna2{*/
.tabelladue colonna2{
width: 240px;
text-align:center; /* allineamento dei titoli */
padding-left:0.5em;
}
/*.tabelladue td#header3 {
.colonna3{*/
.tabelladue colonna3{
width: 140px;
text-align:center; /* allineamento dei titoli */
padding-left:0.5em;
}
/*.tabelladue td#header4 { /* questa serve a riempire lo spazio che a dx sarà occupato dalla barra, quando apparisse */
/*.colonna4{*/
.tabelladue colonna4{
width: 30px;
text-align:center; /* allineamento dei titoli */
padding-left:0.5em;
}
/************************************************** *********************************************/
/* le 4 classi sopra le ho aggiunte in analogia a quelle di tabellauno, con l'intenzione
di allineare la larghezza delle colonne, ma sembra che non abbiano alcun effetto*/
/************************************************** *********************************************/
/* sfondo e colore delle righe dispari */
.tabelladue td {
/*background:#e5e5e5;*/
background:#f2f2f2;
/*color:#000;*/
color:black;
padding-left:10px;
width:220px;
}
/* sfondo e colore delle righe pari */
.tabelladue tr.colorata td {
/*
background:#ccc;
color:#000;
*/
background:#c2c2c2;
color:black ;
}
/*
Questo codice ci permette di avere quanto ci siamo prefissi: righe colorate alterne.
Infatti nel foglio di stile andiamo a dichiarare che le celle [ td ] avranno un colore grigio molto tenue [ background:#e5e5e5; ].
Per fare in modo che tutta la riga successiva possa assumere un altro colore, dichiariamo attraverso una classe [ .tabelladue tr.colorata td ],
un secondo colore di sfondo: background:#ccc;.
L´elemento div
Adesso siamo giunti ad introdurre l´ultimo elemento: il div che farà apparire la barra di scroll; tale elemento lo dichiariamo con una classe; il suo codice è:
*/
.divinterno {height:25em; overflow:auto;}
/* riquadro per scrolling testi lunghi (non necessariamente per tabelle)*/
.riq_scro {
width:760px;
height:150px;
overflow-x:hidden;
overflow-y:auto;
margin:0 auto;
padding:0;
border:#CCCCCC 1px solid;
}
Rispondi quotando