Beispiel:Tabelle-13.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css"> <style>
table {
border-collapse: separate; border-spacing: 0.2em; margin-left:2em; box-shadow: 0 0 0.1em #666; position: relative; z-index:1;
}
th,td {
padding: 0.2em 0.5em; border-radius: 0.1em;
}
thead th {
background-color: #ffebe6; color: #c32e04;
}
td {
font-style:italic; text-align: right; box-shadow: inset 1px 3px 5px -3px rgba(0,0,0,0.5);
}
tbody tr:nth-child(even) {
background-color: #e4ebf2; color: #000;
}
td:empty{
box-shadow: none; background-color:none;
}
th[scope=row] {
color: #c32e04; text-align: right; background-color: #fff;
}
caption { color: white; background: #c32e04; font-size: 1.5em; box-shadow: 0.1em 0.1em 0.1em 0 hsl(0, 0%, 50%); padding: 0.2em 0.2em 0.2em 2em; width: 10em; margin-left: -.6em; position: relative; }
caption::before { content: ""; position: absolute; display: block; height: 0; width: 0; top: 1em; left: -0.6em; border-style: solid; border-width: 0.6em; border-color: transparent hsl(13, 96%, 35%) transparent transparent; z-index: -1; }
tbody tr:hover, tfoot tr:hover {
background-color:#fffbf0;
}
tbody td:hover, tfoot td:hover {
background-color: #fce4a2;
}
</style> <title>Tabellen mit CSS gestalten 6</title>
</head>
<body>
Beispieltabelle
| Chrome | Firefox | Internet Explorer | Egde | Opera | Safari | |||
|---|---|---|---|---|---|---|---|---|
| IE 8 | IE 9 | IE 10-11 | ||||||
| Juli | 25,7% | 30,4% | 0,9% | 1,3% | 8,3% | 0,1% | 1,5% | 22,6% |
| August | 26,2% | 29,6% | 0,7% | 1,2% | 7,5% | 0,8% | 1,6% | 22,8% |
| September | 25,9% | 29,8% | 0,5% | 1,2% | 7,5% | 1,0% | 2,2% | 22,0% |
| Oktober | 26,1% | 29,5% | 0,5% | 1,0% | 7,7% | 1,1% | 2,5% | 20,8% |
| November | 26,3% | 30,6% | 0,4% | 0,9% | 7,6% | 1,3% | 3,1% | 18,6% |
| Dezember | 26,1% | 28,6% | 0,3% | 0,8% | 7,7% | 1,5% | 2,9% | 19,9% |
| Durchschnitt | 26,2% | 29,9% | 0,6% | 1,0% | 7,8% | 1.1% | 2,4% | 20,2% |
Quelle: <a href="https://www.browser-statistik.de/statistiken/versionen/">www.browser-statistik.de</a>
</body> </html>
