[ERLEDIGT] Problem mit einer responsive Tabelle

S.Bandera · 23 Oktober 2019

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.

Hier ein Bild im FF volle Breite:

das bild ist hier wie auf dem Smartphone im FF:

und jetzt noch die Ansicht im Google Chrome wenn es zusammengedrückt ist:

Das sieht jetzt am Bild zwar größer aus, ist jedoch deutlich unter dem Umschaltwert.

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

S.Bandera · 23 Oktober 2019

Hallo Leute,
ich habe eine Tabelle gefunden die so funktioniert wie ich es mir vorstelle, da diese von einer Website stammt poste ich hier den Link zur Seite und dann zum Beispiel:

blog.kulturbanause.de
Beispielseite für responsive Table von Kulturbanause

Jetzt setze ich mich mal hin und versuche zu verstehen was da gemacht wurde ;-)

Besten Dank
Schöne Grüße
Bandera

S.Bandera · 23 Oktober 2019

Jetzt zum letzten Mal ;-)

Für alle die es interressiert hier mein Resultat:

HTML:

<!DOCTYPE html>
<html lang="de">

    <head>
        <meta charset="utf-8">
        <title>Responsive Tables – Tabellen mit CSS umstrukturieren</title>
<style>

* {
    box-sizing:border-box;
}
body {
    font-size: 19px;
}

table {
    width:100%;
}

table, td, tr, th {
    background-color: #999;
    border-collapse: collapse;
    text-align: left;
}

td, tr, th {
    padding:1em;
}

tr {
    border: 1px solid #666;
    border-radius: 1px;
}

th {
    background: #666;
    color: #f90;
    font-weight: bold;
}
@media screen and (min-width:501px) {
    td {
        background-color: white;
    }
    .td-mw {
        min-width: 150px;
    }
}
@media screen and (max-width:500px) {

    table, tr, td {
        padding: 0;
    }

    table, td, tr, th {
        background-color: #999;
        display: block;
    }

    table {
        border: 5px solid #999;
        border-radius: 5px;
    }

    thead {
        display:none;
    }

    tr {
        float: left;
        width: 100%;
        margin-bottom: 5px;
        border: 2px solid #666;
        border-radius: 2px;
        padding: 10px 0px 10px 5px;
    }

    td {
        float: left;
        width: 100%;
        color: white;
    }

    td::before {
        content:attr(data-label) ":";
        width: 20%;
        float:left;
        font-weight: bold;
        color: #f90;
        background-color: #666;
        min-width: max-content;
        padding-right: 0.3em;
        margin-right: 0.3em;
        min-width: 117px;
    }
}

</style>
</head>

<body>

<table>
    <thead>
      <tr>
        <th>Einheit</th>
        <th>Beschreibung</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Einheit" class="td-mw">Lorem ipsum</td>
        <td data-label="Beschreibung">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</td>
      </tr>
      <tr>
        <td data-label="Einheit" class="td-mw">Lorem</td>
        <td data-label="Beschreibung">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</td>
      </tr>
      <tr>
        <td data-label="Einheit" class="td-mw">Lorem ipsum</td>
        <td data-label="Beschreibung">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</td>
      </tr>
      <tr>
        <td data-label="Einheit" class="td-mw">Lorem</td>
        <td data-label="Beschreibung">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</td>
      </tr>
    </tbody>
</table>

</body>
</html>

Das kann man sicher besser machen, dennoch freue ich mich, daß ich die mir selbst gestellte Aufgabe irgendwie umgesetzt bekommen habe.
Schöne Grüße
Bandera

[ERLEDIGT] Problem mit einer responsive Tabelle

S.Bandera

Neues Mitglied

S.Bandera

Neues Mitglied

S.Bandera

Neues Mitglied

Neueste Beiträge