Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Tabella a righe alterne

  1. #1

    Tabella a righe alterne

    Ciao a tutti.
    Potete darmi una mano?

    Ho creato il mio sito imparando da 0, anche grazie alla comunità di HTML...

    Ora ho un quesito: il mio sito è responsive, ed ho una tabella diciamo statica in cui le righe vengono alternate BIANCO-GRIGIO-BIANCO-GRIGIO.
    Un altra tabella, che uso solo quando ho tante colonne, in cui mi compare la barra di scorrimento orizontale, ma non sono riuscita a mettere le righe alterne. Mi date una mano?

    Vi posto il codice CSS... cosa devo modificare? Ho fatto delle prove ma niente, le righe alterne non appaiono mai nella seconda tabella (table-responsive).

    Grazie

    codice:
    .table-striped > tbody > tr:nth-child(odd) > td,
    .table-striped > tbody > tr:nth-child(odd) > th {
    	background-color: #f9f9f9;
    	color: #000000;
    }
    
    
    .table-responsive
    
    
    .table-hover > tbody > tr:hover > td,
    .table-hover > tbody > tr:hover > th {
        background-color: #f9f9f9;
    	color: #000000;
    }

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,610
    prova così: usa solo una classe della tabella

    edit: che c'entrano le righe alterne? semmai le righe evidenziate (visto l'uso di tr:hover)
    Ultima modifica di Vincent.Zeno; 26-01-2018 a 00:47

  3. #3
    Quote Originariamente inviata da Pamela72 Visualizza il messaggio

    Vi posto il codice CSS... cosa devo modificare? Ho fatto delle prove ma niente, le righe alterne non appaiono mai nella seconda tabella (table-responsive).

    Grazie
    Dovrebbe essere sufficiente aggiungere la classe "table-striped"

    codice:
    <div class="table-responsive"> <!-- di modo che compaia la barra orizzontale -->
    
        <table class="table table-striped"> <!-- qui imposti gli stili della tabella -->
            
        </table>
    
    </div>

    Opzionalmente, potresti aggiungere anche la classe "table-hover" se vuoi che le righe si evidenzino quando ci passi sopra con il mouse.

    codice:
        <table class="table table-striped table-hover">

  4. #4
    Caro Luca, non so come ringraziarti!!!

    Avevo realizzato questa tabella in un altra pagina, forse più di un anno fa e funzionava perfettamente.
    Nella nuova pagina avevo difficoltà, non mi ero accorta che andava messo tutto in un div.
    Con il tuo aiuto la pagina è visualizzata esattamente come volevo io...

    Ti ringrazio vivamente!!!
    A presto

    Quote Originariamente inviata da lucavizzi Visualizza il messaggio
    Dovrebbe essere sufficiente aggiungere la classe "table-striped"

    codice:
    <div class="table-responsive"> <!-- di modo che compaia la barra orizzontale -->
    
        <table class="table table-striped"> <!-- qui imposti gli stili della tabella -->
            
        </table>
    
    </div>

    Opzionalmente, potresti aggiungere anche la classe "table-hover" se vuoi che le righe si evidenzino quando ci passi sopra con il mouse.

    codice:
        <table class="table table-striped table-hover">

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