Visualizzazione dei risultati da 1 a 3 su 3
  1. #1

    Tabelle con colore di sfondo alternato

    ciao a tutti volevo sapere se esiste un comando CSS da assegnare al tag table per ottenere una tabella che abbia il colore di sfondo una riga si ed una no...

    ad esempio io assegno lo sfondo azzurro ma vorrei che la mia tabella (che ad esempio è un elenco di prodotti molto lungo) abbia una riga azzurra ed una bianca e cosi via...
    grazie

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Ciao, potresti creare nel css una classe da applicare alle righe interessate, qualora le righe dovessero avere colori diversi, impostarne uno direttamente sull'elemento tr e poi per l'altro creare una classe che assegnerai alle righe volute, esempio:

    codice:
    <style type="text/css">
    #miaTabella tr {
    	background-color: #ccc;
    }
    #miaTabella .rigaBianca {
    	background-color: #fff;
    }
    
    </style>
    Un esempio invece con javascript tratto da questa pagina

    codice:
    ...
    <script type="text/javascript">
    function alternatecolor(id){
    	 if(document.getElementsByTagName){ 
    	   var table = document.getElementById(id); 
    	   var rows = table.getElementsByTagName("tr"); 
    	   for(i = 0; i < rows.length; i++){          
    	     if(i % 2 == 0){
    	       rows[i].className = "row-one";
    	     }else{
    	       rows[i].className = "row-two";
    	     }     
    	   }
    	 }
    	}
    </script>
    <style type="text/css">
    .row-one {
    	background-color: #ccc;
    }
    .row-two {
    	background-color: transparent;
    }
    </style>
    </head>
    
    <body onload="alternatecolor('alternate');">
    <table id="alternate">
      <tr>
        <td>testo</td>
      </tr>
      <tr>
        <td>testo</td>
      </tr>
      <tr>
        <td>testo</td>
      </tr>
      <tr>
        <td>testo</td>
      </tr>
    </table>
    ...
    un esempio coi css3 qui, da verificare la compatibilità fra i vari browser.
    Altre soluzioni più complesse cercando su google alternate table row color


  3. #3
    grazie mille!
    penso che adotterò la soluzione in Javascript visto che la mia tabella è dinamica e non conosco a priori il n° delle righe...
    Ottimo, grazie ancora.

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 © 2026 vBulletin Solutions, Inc. All rights reserved.