nicht angemeldet
Ja, die Checkboxen kenne ich. Aber zum Ausblenden von umfangreichen Texten sind doch <details> überhaupt ins Leben gerufen worden. Auch <summary> weist auf diese Rolle hin. Checkboxen gibts bei mir hauptsächlich in diversen Formularen, und dort modifiziert.
Ich verwende oft SVG-Symbole. In der Vergangenheit meist inline (weil die Farben als "currentColor" angegeben einfach mit color im CSS eingestellt werden können), und jetzt immer häufiger im CSS per image-url.
Ich habe jetzt eine Lösung zum Ein- und Ausblenden von Tabellenzeilen am Ende der angezeigten Tabelle gefunden. Ich berechne einfach die Höhe der Tabelle und setze das <summary> ans untere Ende; wird das angeklickt, verschiebe ich das <summary> entsprechend der hinzugekommenen Zeilen.
Vermutlich kann man sich auch eine komplette CSS-Lösung basteln, die die Anzahl der Zeilen zählt, aber mir ist es jetzt nicht gelungen.
Außerdem gibt es irgendwie Murks, wenn eine zweite Spalte hinzugefügt wird - in den ausgeblendeten Zeilen werden die Spalten mit der ersten Spalte zusammengefasst.
Hier das Beispiel:
<html>
<head>
<style>
.tabelle { position:relative; }
table { position:absolute; top:0rem; left:0rem; background:lightgray; }
details { position:absolute; }
details > summary { list-style:none; font-size:2rem; }
details summary::marker { display:none; }
details summary { cursor:pointer; margin-left:2.5rem; color:blue; }
details summary::before { content:"..."; }
/* Zeilenhöhe festlegen und Abstand bestimmen */
tr { height: 1.8rem; }
.tabelle {
--anzPerm: 2;
--anzSwit: 2;
--cl: calc(var(--anzPerm) * 1.8rem);
--op: calc((var(--anzSwit) + var(--anzPerm)) * 1.8rem);
}
/* Zeilen ein- und ausblenden */
tr.switch { display:none; }
details[open] ~ table tr.switch { display:block; }
/* Platzieren des Schaltelements */
details[closed] { top: var(--cl); }
details[open] { top: var(--op); }
</style>
</head>
<body>
Beispiel
<hr>
<div class="tabelle">
<details closed><summary></summary></details>
<table>
<tr class="permanent"> <td>immer angezeigt</td> <td>schmale Spalte</td></tr>
<tr class="switch"> <td>Inhalt 1</td> <td>schmale Spalte</td></tr>
<tr class="permanent"> <td>(immer)</td> <td>ganz und gar nicht mehr schmale Spalte</td></tr>
<tr class="switch"> <td>Inhalt 2</td> <td>ganz und gar nicht mehr schmale Spalte</td></tr>
</table>
</div>
</body>
</html>
Ich denke aber, dass das in eine Sackgasse führt.
Rolf B
Gunnar Bittersmann