Beliebige Tabellenzeilen mit <details> schalten? von fietur, 24.05.2023 12:34

Beliebige Tabellenzeilen mit <details> schalten?

fietur 24.05.2023 12:34

css
html

Hallo,

ich möchte von einer Tabelle zunächst nur die ersten Zeilen anzeigen; erst mit dem Klick auf ein <details> sollen die restlichen Zeilen angezeigt werden.

Meine erste Lösung bestand darin, die Tabelle zu teilen und unter der ersten Tabelle die zweite in <details> zu verbergen. Leider stimmen dann die Spaltenbreiten nicht überein.

Angenommen, ich möchte die mittels tr.switch {display:none} ausgeblendeten Zeilen wieder in die Anzeige holen, wie verknüpfe ich das mit dem Zustand von <details>?

Nicht funktioniert:

<html>
<head>
<style>

  tr.switch { display:none; }
  details[open] ~ table tr.switch { display:block; }

</style>
</head>
<body>
<div class="tabelle">  
  <table>
    <tr><td>immer anzeigen</td></tr>
    <tr class="switch"><td>ein- und ausblenden</td></tr>
  </table>
  
  <details><summary>toggle</summary>(open)</details>
  
</div>
</body>
</html>

Ist das grundsätzlich nicht möglich, oder wo liege ich falsch?

Beitrag melden

– Informationen zu den Bewertungsregeln