HTML Element an Bidschirm anpassen

0 Pluspunkte 0 Minuspunkte

Wie kann ich eine Tabelle

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
  }
  
  tr:nth-child(even) {
    background-color: #f2f2f2;
  }
  
  th {
    background-color: #4CAF50;
    color: white;
  }
</style>
</head>
<body>

<div>
  <table>
    <tr>
      <th>Name</th>
      <th>Alter</th>
      <th>Stadt</th>
    </tr>
    <tr>
      <td>Max Mustermann</td>
      <td>25</td>
      <td>Musterstadt</td>
    </tr>
    <tr>
      <td>Erika Musterfrau</td>
      <td>30</td>
      <td>Beispielstadt</td>
    </tr>
  </table>
</div>

</body>
</html>

an die Größe des Bildschirm anpassen?

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Du kannst mit einem sogenannten Media-Query verschiedene Styles für verschiedene Dimensionen erstellen. Füge das am Ende des Stylesheet ein, wenn ein Display die definierte Größe hat, werden die Elemente automatisch überschrieben.

/* Responsives Verhalten der Tabelle wenn das Display kleiner als 768 Pixel ist */
@media (max-width: 768px) {

    table, tr, td {
      display: block;
    }
    
    /* Tabellenüberschriften ausblenden */
    th {
      display: none;
    }
}

von  

Ähnliche Fragen