HTML Tabelle teilweise ausblenden

[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 🖖