Stile tabella CSS
Imbottitura tavolo
Per controllare lo spazio tra il bordo e il contenuto in una tabella, utilizzare la
paddingproprietà sugli elementi <td> e <th>:
Esempio
th, td
{
padding: 15px;
text-align: left;
}
Divisori orizzontali
| Nome di battesimo | Cognome | Risparmio |
|---|---|---|
| Peter | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Gio | Swanson | $ 300 |
Aggiungi la border-bottomproprietà a <th> e <td> per i divisori orizzontali:
Esempio
th, td {
border-bottom: 1px solid #ddd;
}
Tavolo mobile
Usa il :hoverselettore su <tr> per evidenziare le righe della tabella al passaggio del mouse:
| Nome di battesimo | Cognome | Risparmio |
|---|---|---|
| Peter | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Gio | Swanson | $ 300 |
Esempio
tr:hover {background-color: yellow;}
Tabelle a righe
| Nome di battesimo | Cognome | Risparmio |
|---|---|---|
| Peter | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Gio | Swanson | $ 300 |
Per le tabelle a strisce zebrate, utilizzare il nth-child()selettore e aggiungere a background-colora tutte le righe pari (o dispari) della tabella:
Esempio
tr:nth-child(even) {background-color: #f2f2f2;}
Colore della tavola
L'esempio seguente specifica il colore di sfondo e il colore del testo degli elementi <th>:
| Nome di battesimo | Cognome | Risparmio |
|---|---|---|
| Peter | Grifone | $ 100 |
| Lois | Grifone | $ 150 |
| Gio | Swanson | $ 300 |
Esempio
th {
background-color: #04AA6D;
color: white;
}