CSS Pokročilejší tabulky
Tabulka s hover efektem.
Přesuňte ukazatel myši na řádky tabulky, abyste viděli efekt.
| Záhlaví 1 | Záhlaví 2 |
| Řádek1 - Sloupec 1 | Řádek1 - Sloupec 2 |
| Řádek2 - Sloupec 1 | Řádek2 - Sloupec 2 |
| Řádek3 - Sloupec 1 | Řádek3 - Sloupec 2 |
| Řádek4 - Sloupec 1 | Řádek4 - Sloupec 2 |
| Řádek5 - Sloupec 1 | Řádek5 - Sloupec 2 |
Kód:
<style>
.mojeTabulka1 {
width: 100%;
border-collapse: collapse;
background: #fff;
overflow: auto;
border: 1px solid;
border-color: #ddd;
font-family: arial, sans-serif;
font-size: 13px;
}
td, th {
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid;
border-color: #ddd;
}
.mojeTabulka1 thead th, .mojeTabulka1 thead td {
color: #0000FF;
background-color: #ECEFF7;
font-weight: bold;
}
.mojeTabulka1 tbody tr:nth-child(odd) td,
.mojeTabulka1 tbody tr:nth-child(odd) th {
background-color: #fafafa;
}
.mojeTabulka1 tbody tr:hover td,
.mojeTabulka1 tbody tr:hover th
{
background-color: #E7E9F9 ; /**/
}
.mojeTabulka1 a.act, mojeTabulka1 a.active, mojeTabulka1 a:hover {
color: #2d8300;
background-color: #F6FCFE;
border-radius: 2px;
}
</style>
<table class="mojeTabulka1">
<thead>
<tr>
<td>Záhlaví 1</td>
<td>Záhlaví 2</td>
</tr>
</thead>
<tr>
<td>Řádek1 - Sloupec 1</td>
<td>Řádek1 - Sloupec 2</td>
</tr>
<tr>
<td>Řádek2 - Sloupec 1</td>
<td>Řádek2 - Sloupec 2</td>
</tr>
<tr>
<td>Řádek3 - Sloupec 1</td>
<td>Řádek3 - Sloupec 2</td>
</tr>
<tr>
<td>Řádek4 - Sloupec 1</td>
<td>Řádek4 - Sloupec 2</td>
</tr>
<tr>
<td>Řádek5 - Sloupec 1</td>
<td>Řádek5 - Sloupec 2</td>
</tr>
</table>
Tabulka s hover efektem.
Tabulka může obsahovat ikony a odkazy, třeba na stránky autoservisu.
Přesuňte ukazatel myši na řádky a odkazy tabulky, abyste viděli efekt.
| Autoservis - pneuservis | Webová adresa |
| Brno | Odkaz v tabulce |
| Plzeň | Odkaz v tabulce |
| Praha | Odkaz v tabulce |
| Olomouc | Odkaz v tabulce |
| Ostrava | Odkaz v tabulce |
Kód:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
<style>
.mojeTabulka1 {
width: 100%;
border-collapse: collapse;
background: #fff;
overflow: auto;
border: 1px solid;
border-color: #ddd;
font-family: arial, sans-serif;
font-size: 13px;
}
td, th {
padding-left: 15px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid;
border-color: #ddd;
}
.mojeTabulka1 thead th, .mojeTabulka1 thead td {
color: #000;
background-color: #ECEFF7;
font-weight: bold;
}
.mojeTabulka1 tbody tr:nth-child(odd) td,
.mojeTabulka1 tbody tr:nth-child(odd) th {
background-color: #fafafa;
}
.mojeTabulka1 tbody tr:hover td,
.mojeTabulka1 tbody tr:hover th
{
background-color: #E7E9F9 ; /**/
}
.mojeTabulka1 a.act, mojeTabulka1 a.active, a:hover {
color: #2d8300;
background-color: #F6FCFE;
border-radius: 2px;
text-decoration: none;
}
a {
text-decoration: none;
color: #0000FF
</style>
<table class="mojeTabulka1">
<thead>
<tr>
<td>Autoservis - pneuservis</td>
<td>Webová adresa</td>
</tr>
</thead>
<tr>
<td><i class="fas fa-car" style="color:red;"></i> Brno</td>
<td><a href="#no">Odkaz v tabulce</a></td>
</tr>
<tr>
<td><i class="fas fa-car"></i> Plzeň</td>
<td><a href="#no">Odkaz v tabulce</a></td>
</tr>
<tr>
<td><i class="fas fa-car"></i> Praha</td>
<td><a href="#no">Odkaz v tabulce</a></td>
</tr>
<tr>
<td><i class="fas fa-car"></i> Olomouc</td>
<td><a href="#no">Odkaz v tabulce</a></td>
</tr>
<tr>
<td><i class="fas fa-car"></i> Ostrava</td>
<td><a href="#no">Odkaz v tabulce</a></td>
</tr>
</table>