Stylování tabulek v css

Pohodlné a efektní ostylování řádků tabulky se nemusí dělat přes javascript, ale pomůže css. Vložte do css následující:

.tigra {
    border-collapse: collapse;
    margin: 0 auto;
}
.tigra th {
    padding: 0 3px;
}
.tigra td {
    vertical-align: middle;
}
.tigra tbody tr:nth-child(odd) {
    background: #e6eaeb;
}
.tigra tbody tr:nth-child(even) {
    background: #ffffff;
}
.tigra tbody tr:nth-child(2n+1):hover {
    background: #C3CCD0;
}
.tigra tbody tr:nth-child(2n):hover {
    background: #C3CCD0;
}

A pak v html dejte tabulku do třídy „tigra“.

<table class="tigra">
<thead>
<tr><th>sloupec 1</th><th>sloupec 2</th></tr>
</thead>
<tbody>
<tr><td>řádek 1</td><td>řádek 1</td></td>
<tr><td>řádek 2</td><td>řádek 2</td></td>
</tbody>
</table>

Napsat komentář

Vaše emailová adresa nebude zveřejněna.