Beliebige Tabellenzeilen mit <details> schalten?

[Gunnar Bittersmann]

@@Rolf B

verwende zum Einblenden eines tr Elements nicht display:block. Das Display-Modell für tabellenzeilen ist display:table-row.

Ja, aber:

Verwende zum Ausblenden eines tr-Elements nicht display:none. Das HTML-Attribut zum Ausblenden ist hidden.

Bei gesetztem hidden-Attribut wirkt der Browserdefault [hidden] {display:none}. Zum Anzeigen einfach hidden entfernen und man muss sich keine Gedanken über den Wert für die display-Eigenschaft machen.

(Müsste man auch nicht bei display:revert. Aber das hidden-Attribut hat noch den Vorteil, dass es auch im DOM auftaucht, man es also im Entwicklertool sieht.)

Anstatt nun mehrere tr initial auszublenden kann man diese auch in gruppieren – tbody ist dafür vorgesehen – und hidden auf die ganze Gruppe anwenden: guckst du.

Accessibility: Das Ausblenden des Buttons hab ich mal auskommentiert. Hier muss noch Fokus-Management betrieben werden. Wenn der Button, auf dem vorher der Fokus lag, verschwindet, landet der Fokus im Nirvana.

🖖 Живіть довго і процвітайте