TP Ultimate von Joomlaplates: die ersten Spalten einer Tabelle wegen der besseren Übersichtlichkeit einfrieren

Hasenmann

Hallo zusammen,

ich habe die Tabelle der Einfachheit halber einmal in den öffentlichen Bereich der Webseite verschoben.

Wegen der besseren Übersichtlichkeit möchte ich gerne (wie bei Excel möglich) die beiden ersten Spalten einfrieren.

So kann man nach rechts zu den Ergebnissen scrollen und sieht vorne in der Tabelle noch den Austragungsort und das Datum.

Ich habe von Ryan von JCE Pro netterweise einen Code bekommen, wie man das lösen könnte.

Es funktioniert schon ganz gut, aber leider werden die Rahmen der Zellen in den ersten beiden Spalten nicht korrekt dargestellt.

Hat jemand eine Idee?

Hier der Code von Ryan:

tableWrapper > table td:nth-child(1) {

position: sticky;

left: 0;

z-index: 100;

background-color: #fff;

}

.tableWrapper > table td:nth-child(2) {

position: sticky;

left: 150px;

z-index: 100;

background-color: #fff;

}

Sieger66

Eventuell nützlich:

https://www.dokspeicher.de/120864/

Dieses Beispiel könnte man auch um eine feste zweite Spalte(Artikel1) erweitern bzw. abändern z.B. in:

Code

     div.wrapperXY {width:40rem;margin:auto;border:none}
	  div.TabelleV5-1 {padding-left:22rem;}
	  div.TabelleV5-2 {position:relative;width:100%; padding:0px;}
	  div.TabelleV5-3 {overflow-x:scroll;padding:0px;   }
	  table.TabelleV5-4 {border-collapse:collapse;}
	  .TabelleV5-4 td, .TabelleV5-4 th {min-width:10rem;border:1px solid #ccc;padding:0em .3rem;vertical-align:top;}
	  .TabelleV5-4 td.V5columnH, .TabelleV5-4 th.V5columnH {position:absolute;left:-22rem;}
      .TabelleV5-4 td.V5columnH + td, .TabelleV5-4 th.V5columnH + th {position:absolute;left:-11rem;}
      .TabelleV5-4 td.V5columnH, .TabelleV5-4 th {font-weight:bold;}

Ursprünglicher Beispielcode aus https://www.dokspeicher.de/120864/ ist:

Spoiler anzeigen

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollbare Tabelle mit fester erster Spalte</title>
  <style>
	  div.wrapper {width:30em;margin:auto;border:solid 1px #FF0000}
	  div.TabelleV5-1 {padding-left:10em;}
	  div.TabelleV5-2 {position:relative;width:100%; padding:0px;}
	  div.TabelleV5-3 {overflow-x:scroll;padding:0px;}
	  table.TabelleV5-4 {border-collapse:collapse;padding:0px;}
	  .TabelleV5-4 tr:nth-of-type(even) {background-color:#eee; /* Zebrastreifen */}
	  .TabelleV5-4 td, .TabelleV5-4 th {min-width:9em;border-top:1px solid #ccc;padding:0em .3em}
	  .TabelleV5-4 td.V5columnH, .TabelleV5-4 th.V5columnH {position:absolute;left:-10em;}
	  .TabelleV5-4 td.V5columnH, .TabelleV5-4 th {font-weight:bold;}
	</style>
</head>
<body>
<div class="wrapper"> 
	<p>Wrapper-Start</p>
	<p>&nbsp; </p>
	<div class="TabelleV5-1">
		<div class="TabelleV5-2">
			<div class="TabelleV5-3">
				<table class="TabelleV5-4">
					<thead>
						<tr>
							<th class="V5columnH">&nbsp; </th>
							<th>Artikel 1 </th>
							<th>Artikel 2 </th>
							<th>Artikel 3 </th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="V5columnH">Beschreibung 1 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>
							<td>Lorem...</td>
						</tr>
						<tr>
							<td class="V5columnH">Beschreibung 2 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>
							<td>Lorem...</td>
						</tr>
						<tr>
							<td class="V5columnH">Beschreibung 3 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>
							<td>Lorem...</td>
						</tr>
						<tr>
							<td class="V5columnH">Beschreibung 4 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>		
							<td>Lorem...</td>
						</tr>
						<tr>
							<td class="V5columnH">Beschreibung 5 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>
							<td>Lorem...</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	<p>Wrapper-Ende</p>
</div>
</body>
</html>

Alles anzeigen

Hasenmann

Hallo Sieger66,

kann ich diesen Code direkt in die .css übernehmen?

Sieger66

Nein, deine vorhandene Tabelle müßte um zwei div-Tags mit den mit entsprechenden CSS-Klassen erweitert umschloßen werden und die in deiner Tabelle bereits vorhandenen Klassen und ID der bereits vorhandenen div-Tags müßten in den obigen CSS-Code eingearbeitet werden.

Bei dir derzeit vorhanden:

Code

...
<div class="astroid-article-text" id="awt-61bae20c0d2cf499628496">
<div class="tableWrapper" style="overflow: auto;">
<table ...

Die Zeile4 in dem obigem CSS-Code wäre dann bei dir z.B.:

div#awt-61bae20c0d2cf499628496 {overflow-x:scroll;padding:0px;}

Hasenmann

Lieben Dank für deine schnelle Antwort,

aber ich kann leider fachlich mit deiner Antwort nix anfangen, denn ich bin kein IT´ler oder Webdesigner.

Kannst du mir vielleicht etwas zeigen was ich mit copy und paste in meine .css übertragen kann?

Sieger66

Edit korrektur wegen Fehler in #4:

Nein, deine vorhandene Tabelle müßte um drei div-Tags ...

Gib uns mal zuerst den Quelltext deiner vorhandenen Tabelle oder deines kompletten Beitrages mit der Tabelle damit wir die drei zusätzlich erforderlichen div-Tags im Code ergänzen können, oder mach es selbst.

Nutze dazu im Beitrags-Editor den Button "Quelltext" oder "Editor an/aus".

Siehe und beachte dazu auch:

Thema

Wie postet man Code-Ausschnitte in diesem Forum

Manchmal möchte man Quellcode-Ausschnitte (PHP, JavaScript, HTML, XML und andere) seiner Frage oder Antwort in diesem Forum hinzufügen.

Dafür verwendet man den Code-Button des Editors, damit andere den Code-Block leichter lesen können.

Ein solcher Block erhält dadurch automatisch Zeilennummern und eine gut lesbare Monospace-Schriftart, Einrückungen bleiben erhalten, im normalen Text u.U. "verbotener" Code wird nicht rausgefiltert oder verändert und, wenn es mal sehr viele Zeilen sind, zeigt…

Re:Later

22. November 2022 um 21:33

Hasenmann

<div class="tableWrapper" style="overflow: auto;">
<table style="width: 1627px; height: 5270px; border-style: solid; border-color: #708090; float: left;" rules="all">
<tbody>
<tr style="background-color: #00bfff; border: 1px solid #000000;">
<td style="border: 1px solid #000000;">Datum</td>
<td style="border: 1px solid #000000;">Ort</td>
<td style="border: 1px solid #000000;">Tag/Uhrzeit</td>
<td style="border: 1px solid #000000;">Meldefrist</td>
<td style="border: 1px solid #000000;">CL</td>
<td style="border: 1px solid #000000;">Wettkampf</td>
<td style="border: 1px solid #000000;">Preisgeld</td>
<td style="border: 1px solid #000000;">Pokale</td>
<td style="border: 1px solid #000000;">Preisverteilung</td>
<td style="border: 1px solid #000000;">Elektronik</td>
<td style="border: 1px solid #000000;">Gastro</td>
<td style="border: 1px solid #000000;">Ergebnisse</td>
</tr>
<tr style="border: 1px solid #000000;">
<td style="border: 1px solid #000000;">29.-31.01.25</td>
<td style="border: 1px solid #000000;"><a href="images/Einladungen/Einladungen_2025/Hausbruch%202025%20Einl.pdf" target="_self">Hausbruch</a></td>
<td style="border: 1px solid #000000;">Mi-Fr 18:00</td>
<td style="border: 1px solid #000000;"></td>
<td style="border: 1px solid #000000;">S/D</td>
<td style="border: 1px solid #000000;">Pokalschießen</td>
<td style="border: 1px solid #000000;">400,200,100</td>
<td style="border: 1px solid #000000;">2x Schützen (Mix), 1x Damen (Mix) </td>
<td style="border: 1px solid #000000;">14.02.25, 19:00</td>
<td style="border: 1px solid #000000;">M10KK,6LG</td>
<td style="border: 1px solid #000000;"> </td>
<td style="border: 1px solid #000000;"><a href="images/Ergebnisse/Ergebnisse_2025/Hausbruch%202025%20Erg.pdf">Ergebnisse</a></td>
</tr>
<tr style="background-color: #98fb98; border: 1px solid #000000;">
<td style="border: 1px solid #000000;">15.-16.02.25</td>
<td style="border: 1px solid #000000;">Buchholz KKS Tell</td>
<td style="border: 1px solid #000000;">Sa-So</td>
<td style="border: 1px solid #000000;">22.01.25</td>
<td style="border: 1px solid #000000;"></td>
<td style="border: 1px solid #000000;">(KM) 9.10 LG 30 Schuss Aufl. HH</td>
<td style="border: 1px solid #000000;"></td>
<td style="border: 1px solid #000000;"></td>
<td style="border: 1px solid #000000;"></td>
<td style="border: 1px solid #000000;"> </td>
<td style="border: 1px solid #000000;"></td>
<td style="border: 1px solid #000000;"><a href="images/Ergebnisse/Ergebnisse_2025/Ergebnisse%209.10%20LG%20HH_2025.pdf">Ergebnisse</a></td>
</tr>

Hasenmann

Hoffentlich war das so richtig gepostet.

Ich habe nur den ersten Teil kopiert, denn die gesamte Tabelle hatte mehr als die erlaubten 10.000 Zeichen.

Rolf Dautrich

Sei mir nicht böse, aber deine Tabelle ist ein typisches Beispiel, wie man es nicht machen sollte:

Mit <table style="width: 1627px; height: 5270px... verhinderst Du zuverlässig, dass die Tabelle auf einem Smartphone vernünftig dargestellt wird.
Dieses HTML könnte man deutlich einfacher schreiben:
Wettkampf
Nächstes Beispiel:
<td style="border: 1px solid #000000;">2x Schützen (Mix), 1x Damen (Mix) </td>
Wenn Du ohnehin schon eine style-Deklaration hast und dann den gesamten Zelleninhalt in ein  packst, könntest Du die Farbzuweisung auch in den style packen.
Und die immergleiche Wiederholung der Styles könnte man viel eleganter lösen, indem man dafür eigene CSS-Klassen in der lokalen CSS-Datei definiert.

Sieger66

Habe mir den Rest der Tabelle auf der Website geholt und um drei erforderliche div-Tags erweitert.

Siehe Tabelle.txt in Dateianhang.

Diesen Quelltext nun auf der Website in den Beitrag komplett einbauen anstatt der vorhandenen Tabelle.

Dann noch erforderlicher CSS-Code kommt anschließend...

Hasenmann

@ Rolf: du hast sicher absolut recht, aber ich habe überhaupt keine Ahnung von CSS Code.

Deine gut gemeinten Ratschläge kann ich leider mangels nötigem Wissen nicht umsetzen.

Der Beitrag wurde mit JCE Pro erstellt, der Code dann automatisch generiert.

Ich bin nur ein Sportleiter eines Vereins und kein Webdesigner oder Programmierer.

@ Sieger66: ganz lieben Dank für deine Mühe, ich probiere das gleich mal aus.

Hasenmann

Sieger66: ähemm, sollte ich vorher den von JCEPro Support erhaltenen eingefügten benutzerdefinierten Code im Astroid Plugin wieder rausnehmen?

Dann wäre die Seite wieder im Originalzustand ohne die beiden fixierten ersten Spalten.

Das ist der Code:

.plg_system_webauthn_login_button {

color: #000;

svg {

margin: 4px;

width: 30px;

}

.tableWrapper>table td:nth-child(1) {

position: sticky;

left: 0;

z-index: 100;

background-color: #fff;

}

.tableWrapper>table td:nth-child(2) {

position: sticky;

left: 150px;

z-index: 100;

background-color: #fff;

}

Sieger66

Nein, das ist nicht erforderlich da ich die CSS-Klasse tableWrapper ohnehin in meiner Tabelle.txt bereits entfernt habe und diese Klasse daher keine Wirkung mehr auf den Quelltext in Tabelle.txt hat...

Hasenmann

Ok, ich habe mich getraut:-)

Den alten Code gelöscht und deinen Code in den Beitrag kopiert.

Und jetzt?

Sieger66

Kannst mal den kompletten nachfolgenden CSS-Code hinzufügen:

Code

div#awt-61bae20c0d2cf499628496 {width:100%;margin:auto;border:none}
div.TabelleV5-1 {padding-left:20.5rem;}
div.TabelleV5-2 {position:relative;width:100%; padding:0px;}
div TabelleV5-3 {overflow-x:scroll;padding:0px;   }
.TabelleV5-4 table {border-collapse:collapse;padding:0px;}
.TabelleV5-4 td {min-width:10rem;border:1px solid #ccc;padding:0em .3rem;vertical-align:top;  }
.TabelleV5-4 tr  td:first-of-type    {position:absolute;left:-21rem; height: 0;   }
.TabelleV5-4 tr  td:nth-child(2){position:absolute;left:-10.5rem ;height: 0;}

Sieger66

Alternativ kannst du stattdessen auch den nachfolgenden CSS-Code hinzufügen:

Code

div#awt-61bae20c0d2cf499628496 {width:100%;margin:auto;border:none}
div.TabelleV5-1 {padding-left:20.5rem;}
div.TabelleV5-2 {position:relative;width:100%; padding:0px;}
div TabelleV5-3 {overflow-x:scroll;padding:0px;   }
.TabelleV5-4 table {border-collapse:collapse;padding:0px;}
.TabelleV5-4 td {padding:0em .3rem;vertical-align:top;  }
.TabelleV5-4 tr  td:first-of-type {min-width:10rem;position:absolute;left:-21rem; height: 0; }
.TabelleV5-4 tr  td:nth-child(2) {min-width:10rem;position:absolute;left:-10.5rem ;height: 0;}

dieser legt nur für die ersten beiden Spalten die Mindestbreite auf 10rem fest und ist daher wohl besser geeignet.

Die Mindestbreite könnte man derzeit für die ersten beiden Spalten auch auf 9rem festlegen.

Alternativ dann z.B. folgenden Code verwenden:

Code

div#awt-61bae20c0d2cf499628496 {width:100%;margin:auto;border:none}
div.TabelleV5-1 {padding-left:18rem;}
div.TabelleV5-2 {position:relative;width:100%; padding:0px;}
div TabelleV5-3 {overflow-x:scroll;padding:0px;   }
.TabelleV5-4 table {border-collapse:collapse;padding:0px;}
.TabelleV5-4 td {padding:0em .3rem;vertical-align:top;  }
.TabelleV5-4 tr  td:first-of-type {min-width:9rem;position:absolute;left:-18.5rem; height: 0;   }
.TabelleV5-4 tr  td:nth-child(2) {min-width:9rem;position:absolute;left:-9.3rem ;height: 0;}

Sieger66

Wenn du die ersten beiden Spalten noch schmaler und mit Zeilenumbruch möchtest wäre alternativ z.B. nachfolgender CSS-Code wohl nützlich:

Code

div#awt-61bae20c0d2cf499628496 {width:100%;margin:auto;border:none}
div.TabelleV5-1 {padding-left:14rem;}
div.TabelleV5-2 {position:relative;width:100%; padding:0px;}
div TabelleV5-3 {overflow-x:scroll;padding:0px; }
.TabelleV5-4 table {border-collapse:collapse;  }
.TabelleV5-4 td {padding:0em .3rem;vertical-align:top; white-space:pre-wrap ; }
.TabelleV5-4 tr  td:first-of-type {width:7rem;position:absolute;left:-14.5rem ;margin-top:-1px; ;height:0;  }
.TabelleV5-4 tr  td:nth-child(2) {width:7rem;position:absolute;left:-7.3rem ;margin-top:-1px;height: 0;}

Hasenmann

wo füge ich den Code ein?

Zu Beginn des Beitrags?

Oder im benutzerdefinierten Code im Astroid Plugin?

Sieger66

Dort z.B. wo du den anderen CSS-Code aus #12 auch eingefügt hast.

Also wohl im Astroid Plugin.

Oder alternativ den CSS-Code in eine separate neue Datei auslagern nach folgendem Muster:

/media/templates/site/your_template_name/css/custom.css

bei dir wäre das dann z.B. dort:

/media/templates/site/tp_ultimate/css/custom.css

siehe z.B. auch:

docs.astroidframe.work/custom-code/custom-css