S.Bandera
Neues Mitglied
Hallo Leute,
bevor ich mein Problem beschreibe möchte ich noch darauf hinweisen, daß ich nicht nur neu in diesem Forum bin sondern ich versuche mir gerade HTML und CSS selbst beizubringen.
Das ganze ist nicht für eine Website es sollte nur ein Lernprojekt sein. Ich stellte mir die Frage ob es möglich ist, heutzutage noch Tabellen vernünftig zu verwenden und suchte nach responsive Table im Internet. Ich habe ein Beispiel gefunden und so umgenaut wie ich es mir vorstellte. Jetzt habe ich festgestellt, dass es im Google Chrome nicht funktioniert.
Ich poste mal das HTML und CSS hier rein, vielleicht hat jemand Zeit da mal drüber zu schauen.
Jetzt das CSS:
Besten Dank für Eure Zeit und Mühe
Schöne Grüße
Bandera
bevor ich mein Problem beschreibe möchte ich noch darauf hinweisen, daß ich nicht nur neu in diesem Forum bin sondern ich versuche mir gerade HTML und CSS selbst beizubringen.
Das ganze ist nicht für eine Website es sollte nur ein Lernprojekt sein. Ich stellte mir die Frage ob es möglich ist, heutzutage noch Tabellen vernünftig zu verwenden und suchte nach responsive Table im Internet. Ich habe ein Beispiel gefunden und so umgenaut wie ich es mir vorstellte. Jetzt habe ich festgestellt, dass es im Google Chrome nicht funktioniert.
Ich poste mal das HTML und CSS hier rein, vielleicht hat jemand Zeit da mal drüber zu schauen.
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Elemente und Optionen</title>
<link rel="stylesheet" type="text/css" href="euo.css">
</head>
<body>
<h1>TG List to Table</h1>
<table class="tg-table">
<tr>
<th>Element</th>
<th>Beschreibung</th>
</tr>
<tr>
<td data-th="Element">Element1</td>
<td data-th="Beschreibung">definiert eien Element</td>
</tr>
<tr>
<td data-th="Element">Element2</td>
<td data-th="Beschreibung">definiert eien Element</td>
</tr>
<tr>
<td data-th="Element">Element3</td>
<td data-th="Beschreibung">definiert eien Element</td>
</tr>
<tr>
<td data-th="Element">Element4</td>
<td data-th="Beschreibung">definiert eien Element. Mögliche Optionen lauten:
<ul>
<li><i>option 1</i>: Erlärung der Option 1</li>
<li><i>option 2</i>: Erlärung der Option 2</li>
<li><i>option 3</i>: Erlärung der Option 3</li>
<li><i>option 4</i>: Erlärung der Option 4</li>
<li><i>option 5</i>: Erlärung der Option 5</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
Jetzt das CSS:
CSS:
.tg-table {
margin: 1em 0;
min-width: 300px;
max-width: 1000px;
}
.tg-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
.tg-table th {
display: none;
}
.tg-table td {
display: block;
}
.tg-table td:first-child {
padding-top: 0.5em;
}
.tg-table td:last-child {
padding-bottom: 0.5em;
}
.tg-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 8em;
display: inline-block;
}
@media (min-width: 480px) {
.tg-table td:before {
display: none;
}
}
.tg-table th, .tg-table td {
text-align: left;
}
@media (min-width: 480px) {
.tg-table th, .tg-table td {
display: table-cell;
padding: 0.25em 0.5em;
}
.tg-table th:first-child, .tg-table td:first-child {
padding-left: 0;
}
.tg-table th:last-child, .tg-table td:last-child {
padding-right: 0;
}
}
body {
padding: 0 2em;
font-family: Montserrat, sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
color: #444;
background: #eee;
font-size: 16px;
}
h1 {
font-weight: normal;
letter-spacing: -1px;
color: #34495E;
}
.tg-table {
background: #666;
color: #fff;
border-radius: 0.5em;
overflow: hidden;
}
.tg-table tr {
border-color: #46637f;
}
.tg-table th, .tg-table td {
margin: 0.5em 1em;
}
@media (min-width: 480px) {
.tg-table th, .tg-table td {
padding: 1em !important;
}
}
.tg-table th, .tg-table td:before {
color: #f90;
background-color: #444;
}
Besten Dank für Eure Zeit und Mühe
Schöne Grüße
Bandera