CSS- Tabellenstil
Tischpolsterung
Um den Abstand zwischen dem Rahmen und dem Inhalt in einer Tabelle zu steuern, verwenden Sie die
paddingEigenschaft für die Elemente <td> und <th>:
Beispiel
th, td
{
padding: 15px;
text-align: left;
}
Horizontale Teiler
| Vorname | Nachname | Ersparnisse |
|---|---|---|
| Peter | Greif | $100 |
| Lois | Greif | $150 |
| Jo | Schwanson | $300 |
Fügen Sie die border-bottomEigenschaft zu <th> und <td> für horizontale Trennlinien hinzu:
Beispiel
th, td {
border-bottom: 1px solid #ddd;
}
Schwebebarer Tisch
Verwenden Sie den :hoverSelektor auf <tr>, um Tabellenzeilen hervorzuheben, wenn Sie mit der Maus darüber fahren:
| Vorname | Nachname | Ersparnisse |
|---|---|---|
| Peter | Greif | $100 |
| Lois | Greif | $150 |
| Jo | Schwanson | $300 |
Beispiel
tr:hover {background-color: yellow;}
Gestreifte Tische
| Vorname | Nachname | Ersparnisse |
|---|---|---|
| Peter | Greif | $100 |
| Lois | Greif | $150 |
| Jo | Schwanson | $300 |
Verwenden Sie für Tabellen mit Zebrastreifen den nth-child()Selektor und fügen Sie a background-colorzu allen geraden (oder ungeraden) Tabellenzeilen hinzu:
Beispiel
tr:nth-child(even) {background-color: #f2f2f2;}
Tischfarbe
Das folgende Beispiel gibt die Hintergrund- und Textfarbe von <th>-Elementen an:
| Vorname | Nachname | Ersparnisse |
|---|---|---|
| Peter | Greif | $100 |
| Lois | Greif | $150 |
| Jo | Schwanson | $300 |
Beispiel
th {
background-color: #04AA6D;
color: white;
}