Tabellenzellen-Rahmen verschwinden, wenn einzelne tr auf display:none gesetzt werden

[MudGuard]

Hi,

ist es zu erwartendes Verhalten, daß die Rahmen von Tabellenzellen in der gesamten Tabelle verschwinden, wenn einzelne Zeilen per display:none; ausgeblendet werden?

Also ich hatte das zumindest nicht erwartet. Ich dachte, daß eine tr mit display:none; sich so verhalten sollte, als wäre sie nicht vorhanden.

Ach ja, rauslöschen der Zeilen aus dem tbody funktioniert zwar, aber dann sind sie weg, und ich kann sie bei anderer Filter-Auswahl nicht mehr einblenden.

(die Seite darf ich nicht öffentlich zugänglich machen)

table { border-collapse: collapse; border: thick solid blue; }
th, td { border: thin solid black; padding: 0.2em; }
tr.hidden { display:none; }

//row enthält die entsprechende Zeile:
row.classList.add("hidden");

PS: die Seite ist nur für mich, aria... brauch ich erst mal nicht.

Ich versuch nachher mal, ein Code-Pen oder wie das heißt zu basteln ...

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

ich habe das mit diesem HTML ausprobiert:

<table>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
</table>

und diesem JavaScript:

setTimeout(kill, 2000);

function kill() {
   let r = document.querySelector("table tr:nth-child(3)");
   r.classList.add("hidden");
   // bzw: r.hidden = true;
}

und deinem CSS.

Ergebnis nach 2 Sekunden:

Im Kommentar ist die „richtigere“ Alternative: die hidden-Eigenschaft zu setzen anstatt das Verhalten dieser Eigenschaft mit einer Klasse nachzubauen. Sieht aber genauso aus.

Rolf

[MudGuard]

Hi,

<table>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
<tr><td>Huhu</td><td>Huhu</td><td>Huhu</td><td>Huhu</td></tr>
</table>

hm. Ich hab mehrere tbody, auf die sich die Zeilen verteilen. Sollte das der entscheidende Unterschied sein?

setTimeout(kill, 2000);

function kill() {
   let r = document.querySelector("table tr:nth-child(3)");
   r.classList.add("hidden");
   // bzw: r.hidden = true;
}

Im Kommentar ist die „richtigere“ Alternative: die hidden-Eigenschaft zu setzen anstatt das Verhalten dieser Eigenschaft mit einer Klasse nachzubauen.

ja, ich merke, daß einige Jahre ohne Webseiten-Bastelei dazu geführt haben, daß ich nicht mehr auf dem aktuellen Stand bin.

Hab's mit dem hidden-Attribut/Property/whatever probiert.

Gleiches Ergebnis, die Rahmen verschwinden, sobald nicht alle Zeilen angezeigt werden.

Ach ja, ich hab's im Firefox (118.0.1 64BIt unter Windows) probiert. Die Rahmen verschwinden.
Unter MacOs, Chrome (117.0.5938.149) bleiben die Rahmen erhalten.

Strange ...

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo MudGuard,

Gerade mit FF 118.0.2 nachgetestet. Passiert nicht. Eben hatte ich es auch mit FF probiert, aber die Version nicht geprüft. Da kann es 117.x oder 118.0.1 gewesen sein.

Ich habe mal mehrere tbodys mit mehreren Rows gemacht. Ich habe das erste, mittlere und letzte tr ausgeblendet (mit Klasse und Attribut hidden). Alle Linien bleiben sichtbar.

Mein Fiddle: https://jsfiddle.net/bq0ahy87/

Rolf

[MudGuard]

Hi,

Mein Fiddle: https://jsfiddle.net/bq0ahy87/

da bleiben auch in meinem Firefox alle Linien erhalten.

Seltsam, seltsam.

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@Rolf B

Im Kommentar ist die „richtigere“ Alternative: die hidden-Eigenschaft zu setzen anstatt das Verhalten dieser Eigenschaft mit einer Klasse nachzubauen.

Warum im Kommentar? Warum überhaupt die „falsche“ Variante mit Klasse?

Möglicherweise will man aber

tr[hidden] {
	display: revert;
	visibility: collapse;
}

setzen, damit beim dynamischen Ein-/Ausblenden nicht die Spaltenbreiten neu berechnet werden müssen. [MDN] Siehe nicht genehmigte Mission.

---

@MudGuard, tritt bei visibility: collapse derselbe komische Effekt auf wie bei display: none?

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

[MudGuard]

Hi,

Möglicherweise will man aber

tr[hidden] {
	display: revert;
	visibility: collapse;
}

@MudGuard, tritt bei visibility: collapse derselbe komische Effekt auf wie bei display: none?

Nein, der tritt dabei nicht auf. Und im Nebeneffekt werden die Spaltenbreiten nicht neu gesetzt …

cu,
Andreas a/k/a MudGuard