HTML Tabelle teilweise ausblenden

[Sophie]

Hallo,

ich habe eine große Tabelle, die wie folgt aufgebaut ist

<table id="tbl-artikelart" class="frontend-tabelle">
	<thead class="thead">
		<tr>
			<th>Anzahl</th>
			<th>Bild</th>
			<th>Artikel</th>
		</tr>
	</thead>

	<tbody>
		 <tr>
			<td>xxx</td>
			<td>xxx</td>
			<td>xxx</td>
		</tr>
	</tbody>
</table>

Die Tabelle ist zum Teil sehr lange. Wäre es möglich dass ich mit CSS ein Teil davon ausblenden kann mit einem Button mehr anzeigen? Ich würde gerne immer nur 3-4 Einträge sehen. Der Rest soll erst einmal ausgeblendet werden um ein Übersichtlicheres Design zu erhalten.

Oder kann ich eine Tabelle überhaupt nicht zum Teil ausblenden?

[MrMurphy1]

Hallo

Eine Taballe kann teilweise ausgeblendet werden kann.

Die einfachere, auch schlichtere, aber schlechtere Lösung wäre dies mit CSS zu machen, Stichworte: Checkbox-Hack oder :target. Die Lösung ist aber nicht barrierefrei.

Oder halt mit JavaScript. Dann solltest du nur darauf achten dass die Tabelle immer komplett bei den Besuchern angezeigt wird, die JavaScript blockiert haben.

Falls die Lösung sich automatisch der Tabellenlänge anpassen soll kommst du um JavaScript nicht herum.

Oder eine Lösung mit PHP und CSS erstellen, was aber im Endeffekt sehr viel Aufwand mit den Nachteilen einer CSS-Lösung wäre.

Gruss

MrMurphy

[Sophie]

Hallo,

was würdest du mit denn Empfehlen? Lieber mit CSS oder lieber mit JavaScript?

[Matthias Scharwies]

Servus!

Die Tabelle ist zum Teil sehr lange. Wäre es möglich dass ich mit CSS ein Teil davon ausblenden kann mit einem Button mehr anzeigen? Ich würde gerne immer nur 3-4 Einträge sehen. Der Rest soll erst einmal ausgeblendet werden um ein Übersichtlicheres Design zu erhalten.

Oder kann ich eine Tabelle überhaupt nicht zum Teil ausblenden?

Ein anderer Lösungsansatz: Zellen untereinander anordnen

• CSS/Anwendung_und_Praxis/Tabellen_responsiv_gestalten

[Sophie]

Nein, das ist keine Option für mich und war auch nicht die Frage.

[TS]

Hello,

ich habe eine große Tabelle, die wie folgt aufgebaut ist

<table id="tbl-artikelart" class="frontend-tabelle">
	<thead class="thead">
		<tr>
			<th>Anzahl</th>
			<th>Bild</th>
			<th>Artikel</th>
		</tr>
	</thead>

	<tbody>
		 <tr>
			<td>xxx</td>
			<td>xxx</td>
			<td>xxx</td>
		</tr>
	</tbody>
</table>

Die Tabelle ist zum Teil sehr lange. Wäre es möglich dass ich mit CSS ein Teil davon ausblenden kann mit einem Button mehr anzeigen? Ich würde gerne immer nur 3-4 Einträge sehen. Der Rest soll erst einmal ausgeblendet werden um ein Übersichtlicheres Design zu erhalten.

Gunnar hat hier im Forum vor einiger Zeit (in diesem Jahr) mal gezeigt, wie man einen Tabellenkopf stehenlassen kann, auch wenn die Zeilen darunter (innerhalb einer Box) scrollbar gemacht werden. Das wäre doch mMn eine Alternative für Dich und insbesondere für den User, oder?

Da müsstest Du aber bitte selber mal im Archiv suchen. Ich habe es leider versäumt, das in meine Sammlung der Tipps und Tricks aufzunehmen.

Liebe Grüße
Tom S.

[Sophie]

Hallo Tom,

Gunnar hat hier im Forum vor einiger Zeit (in diesem Jahr) mal gezeigt, wie man einen Tabellenkopf stehenlassen kann, auch wenn die Zeilen darunter (innerhalb einer Box) scrollbar gemacht werden. Das wäre doch mMn eine Alternative für Dich und insbesondere für den User, oder?

das wäre gar nicht so schlecht, allerdings dann in Verbindung mit meiner Idee. Denn das Problem mit der langen Tabelle habe ich ja weiterhin.

Ich schau mal ob ich den Beitrag irgendwo finde. Weißt du vielleicht ob es möglich ist, dass ich dann sagen kann wenn das Box-Ende erreicht ist, dass der Kopf dann verschwindet und ich "normal" auf der Seite weiter scrollen kann?

[TS]

Hello,

Ich schau mal ob ich den Beitrag irgendwo finde. Weißt du vielleicht ob es möglich ist, dass ich dann sagen kann wenn das Box-Ende erreicht ist, dass der Kopf dann verschwindet und ich "normal" auf der Seite weiter scrollen kann?

Du meinst sicherlich, wenn das Tabellenende innerhalb der Box steht und sich nicht mehr hidden unterhalb der Box befindet?

Das sollte mit JS möglich sein, dann z. B. die ganze Tabelle auszublenden und sie nur anzuzeigen, wenn sich der Mauszeiger (oder der Focus) auf der Box befindet. Für die Tastaturbedieung müsste sie aber ein selektierbares Element enthalten. Das habe ich jetzt nicht näher untersucht, was dafür genau notwendig ist.

Liebe Grüße
Tom S.

[Sophie]

Hallo Tom,

ich glaube, ich habe seine Beispiele gefunden:

1. https://codepen.io/gunnarbittersmann/pen/PNqzgP
2. https://codepen.io/gunnarbittersmann/pen/LNNjGQ
3. https://codepen.io/gunnarbittersmann/pen/VaQzmb

Meintest du diese? Gefunden in diesem Beitrag:
https://forum.selfhtml.org/self/2016/may/24/tabellen-kopfzeile-fixieren-und-kopieren/1668073#m1668073

EDIT: Ich glaube dieses ist mein Favorit: https://codepen.io/gunnarbittersmann/pen/VaQzmb

[TS]

Hello,

ich glaube, ich habe seine Beispiele gefunden:

1. https://codepen.io/gunnarbittersmann/pen/PNqzgP
2. https://codepen.io/gunnarbittersmann/pen/LNNjGQ
3. https://codepen.io/gunnarbittersmann/pen/VaQzmb

Meintest du diese? Gefunden in diesem Beitrag:
https://forum.selfhtml.org/self/2016/may/24/tabellen-kopfzeile-fixieren-und-kopieren/1668073#m1668073

Ich denke, die waren es.
Werde ich gleich selber nochmal in meine Sammlung aufnehmen ;-)

Liebe Grüße
Tom S.

[Gunnar Bittersmann]

@@Sophie

Die Tabelle ist zum Teil sehr lange. Wäre es möglich dass ich mit CSS ein Teil davon ausblenden kann mit einem Button mehr anzeigen? Ich würde gerne immer nur 3-4 Einträge sehen. Der Rest soll erst einmal ausgeblendet werden um ein Übersichtlicheres Design zu erhalten.

Oder kann ich eine Tabelle überhaupt nicht zum Teil ausblenden?

Klar kannst du Tabellenzeilen mit display: none ausblenden.

Die Interaktion (das Reagieren auf Drücken des Ein-/Aublenden-Buttons) geschieht per JavaScript. Ohne JavaScript soll die Tabelle ganz zu sehen sein; der dann funktionslose Button aber nicht.

Der Button bekommt deshalb im Markup das hidden-Attribut verpasst; welches mit JavaScript entfernt wird. Außerdem wird initial aria-expanded="false" gesetzt (was angibt, dass die Tabelle nicht ausgeklappt ist). Dieses Attribut wird per Knopfdruck zwischen false und true umgeschaltet.

Wenn das aria-expanded-Attribut auf false steht, werden die Tabellenzeilen ab der vierten per CSS ausgeblendet:

[aria-expanded='false'] + #myTable > tbody > tr:nth-of-type(n+4)
{
	display: none;
}

☞ So sieht’s aus.

LLAP 🖖

[Sophie]

Hallo Gunnar Bittersmann,

vielen vielen Dank für dein Beispiel. Genau nach so etwas habe ich gesucht. Jetzt versuche ich das Beispiel von dir mit deinem anderen Beispiel zu verbinden und schauen ob ich da etwas hinbekomme. Inhalte einblenden um beim scrollen der Kopf stehen lassen.

@TS, vielleicht ist ja das Bespiel auch etwas für dich.

[Gunnar Bittersmann]

@@Sophie

Ich hab der eingeklappten Tabelle jetzt noch eine visuelle Kennzeichnung spendiert.

LLAP 🖖