Styl tabeli CSS
Wypełnienie stołu
Aby kontrolować przestrzeń między obramowaniem a treścią w tabeli, użyj
padding
właściwości na elementach <td> i <th>:
Przykład
th, td
{
padding: 15px;
text-align: left;
}
Przegrody poziome
Imię | Nazwisko | Oszczędności |
---|---|---|
Piotr | Gryf | 100 zł |
Lois | Gryf | 150 zł |
Joe | Swanson | 300 zł |
Dodaj border-bottom
właściwość do <th> i <td> dla dzielników poziomych:
Przykład
th, td {
border-bottom: 1px solid #ddd;
}
Unoszący się stół
Użyj :hover
selektora na <tr>, aby podświetlić wiersze tabeli po najechaniu myszą:
Imię | Nazwisko | Oszczędności |
---|---|---|
Piotr | Gryf | 100 zł |
Lois | Gryf | 150 zł |
Joe | Swanson | 300 zł |
Przykład
tr:hover {background-color: yellow;}
Stoły w paski
Imię | Nazwisko | Oszczędności |
---|---|---|
Piotr | Gryf | 100 zł |
Lois | Gryf | 150 zł |
Joe | Swanson | 300 zł |
W przypadku tabel w paski zebry użyj nth-child()
selektora i dodaj a background-color
do wszystkich parzystych (lub nieparzystych) wierszy tabeli:
Przykład
tr:nth-child(even) {background-color: #f2f2f2;}
Kolor stołu
Poniższy przykład określa kolor tła i kolor tekstu <th> elementów:
Imię | Nazwisko | Oszczędności |
---|---|---|
Piotr | Gryf | 100 zł |
Lois | Gryf | 150 zł |
Joe | Swanson | 300 zł |
Przykład
th {
background-color: #04AA6D;
color: white;
}