[ERLEDIGT] Problem mit einer responsive Tabelle

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

S.Bandera

Neues Mitglied
23 Oktober 2019
3
0
1
45
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:
5261
das bild ist hier wie auf dem Smartphone im FF:
5262

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

5263
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

Neues Mitglied
23 Oktober 2019
3
0
1
45
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
 
Werbung:

Latest posts