PadAmy: Ein ganzes Tabellenfeld als Link

Hallo alle,

es gibt eine Tabelle mit 3 Spalten und etwa 30 Zeilen. Unten der vereinfachte Quelltext.

Das dritte Tabellenfeld soll komplett wie ein Link reagieren. Wenn also mit MausOver die Grenzen des Tabellenfeldes überschritter werden, soll der Link <a href="http://.../zu_einer_html_seite/"> erkannt werden.

Wichtig dabei: Es soll egal sein, ob die Maus über Inhalt fährt, oder sich im leerem Raum des Tabellenfeldes befindet.

<table class="ar_zs_zeitrahl">

<tbody>

	<tr>

		<td class="ar_zs_jahr">
			2018
		</td>

		<td class="ar_zs_bild">
				<img src="http://url/zu/einem/bild.jpg" />
		</td>

		<td class="ar_zs_text">						<!----------- Um dieses Tabellenfeld geht es -->
			<a href="http://.../zu_einer_html_seite/">
				Ein wenig Text
				<img src="http://url/zu/einem/anderen/bild.png/>
			</a>
		</td>

	</tr>

</tbody>
</table>

In meiner bisherigen Lösung werden nur die tatsächlichen Inhalte des Tabellenfeldes als Link erkannt, nicht jedoch der leere Bereich.

Kann mir hier jemand von euch auf die Sprünge helfen?

Danke fürs Mitdenken und eure Zeit. LG

  1. @@PadAmy

    a { display: block } hilft zumindest ein bisschen.

    Da du sicher nicht alle a-Elemente auf der Seite zu Blockelementen machen willst, ist vielleicht td a { display: block } was für dich.

    Damit ist die clickbare Box aber nur so hoch wie ihr Inhalt. Wenn die Tabellenzelle höher ist, weil andere Zellen in der Spalte mehr Inhalt haben, ist immer noch nicht die gesamte Tabellenzelle clickbar.

    Wenn die betreffende Tabellenzelle aber die höchste in der Zeile ist, sollte das reichen.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. @@Gunnar Bittersmann

      Damit ist die clickbare Box aber nur so hoch wie ihr Inhalt. Wenn die Tabellenzelle höher ist, weil andere Zellen in der Spalte mehr Inhalt haben, ist immer noch nicht die gesamte Tabellenzelle clickbar.

      Und wenn nicht? Kriegt man das a-Element mit CSS so hoch wie das td-Element? (Irgendein Hack mit position: absolute dürfte ausfallen.)

      Mir fällt da auf die Schnelle nur JavaScript ein

      document.querySelectorAll('td a').forEach(aElement => {
      	aElement.style.height = aElement.closest('td').offsetHeight + 'px';
      });
      

      was initial und bei jeder Änderung der Tabelle (Änderung des Inhalts; resize des Browserfensters) ausgeführt wird.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. Hallo Gunnar,

        mit einem a { display: block } könnte ich leben.

        Mit der Einbindung von Javascript kenne ich mich nicht aus.

        Zum Hintergrund:

        Es handelt sich um den kleinen Teil einer WordPress-Seite. Nur für diesen Teil (die Tabelle eben) binde ich ein wenig CSS und HTML ein. Für denjenigen, der später Content hinzufügt (und das bin nicht ich selbst), soll alles so einfach wie möglich werden. Und da in WP Tabellen nicht so ohne Weiteres im WYSIWYG-Modus erweitert werden können und die Tabelle grafisch einige kleine Features haben soll, ist übersichtlicher Quelltext nötig.

        So gesehen ist die Lösung aus deiner ersten Antwort funktionell und zielführend.

        Herzlichen Dank also für deine Hilfe & Gruß.

      2. @@Gunnar Bittersmann

        Mir fällt da auf die Schnelle nur JavaScript ein

        Ja, aber man muss da nicht an der Höhe des a-Elements rummachen. Besser dürfte sein:

        document.querySelectorAll('td a').forEach(aElement => {
        	aElement.closest('td').addEventListener('click', event => {
        		window.location =	aElement.href;
        	});
        });
        

        Was man nur einmal machen muss;

        bei jeder Änderung der Tabelle (Änderung des Inhalts; resize des Browserfensters) ausgeführt wird.

        kann man sich sparen.

        LLAP 🖖

        PS: Dann natürlich auch cursor: pointer für die entsprechenden tds setzen – aber nur dann, wenn das JavaScript ausgeführt wird.

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      3. @@Gunnar Bittersmann

        Kriegt man das a-Element mit CSS so hoch wie das td-Element? (Irgendein Hack mit position: absolute dürfte ausfallen.)

        Warum eigentlich?

        Man muss ja nicht das a-Element so hoch kriegen wie das td-Element; es darf auch ein Pseudoelement sein.

        Guckst du.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo Gunnar,

          dislike

          • Unnützes padding-right im ::after
          • Der aktive Bereich des a ist breiter als der visuell hervorgehobene Bereich (weil das a ein padding-right hat statt margin-right
          • Eine Borderline, die Spalten optisch trennt, ist am ::after versteckt - WTF?
          • Magic Number 1em muss am a und ::after zusammenpassen, sowas mach ich gar nicht gern; bei Änderungen vergisst man garantiert einen von beiden (und JA, man kann das mit CSS Präprozessoren kaschieren).

          Rolf

          --
          sumpsi - posui - clusi
          1. @@Rolf B

            • Unnützes padding-right im ::after

            Huch, da hab ich nach dem Spielen das Kinderzimmer nicht aufgeräumt. Ist weg.

            • Der aktive Bereich des a ist breiter als der visuell hervorgehobene Bereich (weil das a ein padding-right hat statt margin-right

            padding-right für a muss schon sein, ansonsten klebt die Schrift u.U. an der Trennlinie.

            Hab jetzt right fürs Pseudoelement auf 0 gesetzt und dem rechten td padding-left verpasst.

            • Eine Borderline, die Spalten optisch trennt, ist am ::after versteckt - WTF?

            Warum nicht? Sicher könnte man die Trennlinie auch für eins der beiden td machen. Allerdings: die Trennline wechselt bei :focus/:hover die Farbe. Da ist sie wohl beim a::after bestens aufgehoben.

            • Magic Number 1em …

            Nein, 1em ist keine magic number.

            … muss am a und ::after zusammenpassen, sowas mach ich gar nicht gern; bei Änderungen vergisst man garantiert einen von beiden (und JA, man kann das mit CSS Präprozessoren kaschieren).

            Oder mit custom properties. Und von „kaschieren“ würde ich da nicht sprechen.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Hallo Gunnar,

              so ist's schöner. Gestern klebte auch noch der Text am Strich, das ist heute weg.

              Den Farbwechsel der Linie habe ich nicht bemerkt, der war mir zu subtil. Unter diesem Gesichtspunkt ist die Linie natürlich richtig platziert. Dass die Border-Color die Foreground-Color als Default hat, wusste ich gar nicht. Bisher hatte ich immer explizit eine Border-Color gesetzt :).

              Rolf

              --
              sumpsi - posui - clusi
              1. @ Gunnar, @ Rolf,

                Der CSS-Code ist sehr elegant. Und er macht genau das was er soll - nämlich den Anwender, der im HTML-Bereich die Tabelle mit Inhalt füllen muss, vollständig von spezieller Codierung zu befreien.

                Nun stellt sich mir aber die Frage, warum keine Klassen verwendet werden.

                • Das vorhandene CSS sorgt dafür, dass alle Tabellen, für die keine anderen Vereinbarungen getroffen wurden, gleich aussehen. Soweit so gut. Sobald aber eine abweichende Formatierung einer Tabelle nötig ist, wären doch Klassen angesagt. Das sehe ich doch richtig - oder?

                • Kommt diese Art der Codierung (also ohne Klassen) nicht mit dem CSS von Wordpress in Konflikt?

                • Wenn Klassenbezeichner verwendet werden, kann man doch sicher sein, dass es keine Überschneidungen gibt, indem eindeutige Prafixe vor die Namen gestellt werden in der Form von z.B. xyz_.

                Ich bin kein CSS-Wizard wie ihr - deshalb sind meine Fragen womöglich überflüssig.

                LG

  2. Hallo PadAmy,

    bei Stackoverflow finde ich diesen Kommentar von einem gewissen Jez:

    I'm told by Boris Zbarsky[1] himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.

    Jez Ansicht, dass sich die Browserhersteller darauf nicht einlassen wollen, liegt vermutlich darin begründet, dass man damit Aspekte der Semantik von Table Cells brechen würde

    Muss es eine Table sein? Hast Du Einfluss auf das Markup? Kannst Du die Zeilen als Flexbox oder die Tabelle als Grid gestalten?

    Rolf

    --
    sumpsi - posui - clusi

    1. Boris Zbfrpp wer? ↩︎

    1. Hallo Rolf,

      Muss es eine Table sein?

      Nein, muss es nicht. Obwohl es von den Inhalten her eigentlich eine typische Tabelle ist.

      Hast Du Einfluss auf das Markup?

      Man kann in Wordpress eine Seite auf 2 Arten mit Inhalt füllen:

      Im WYSIWYG-Editor, der dann das CSS des aktiven Themes verwendet. Oder altenativ im Text-Editor. Hier hat man einen gewissen Einfluss per HTML und CSS. Das Hin- und Herschalten zwischen beiden Ansichten zerstört aber jedes Mal die optische Struktur, die man in sein HTML gebracht hat. Sehr lästig.

      Kannst Du die Zeilen als Flexbox ...

      Ich bin zwar nicht ganz schlecht in HTML und CSS. Die neuen Möglichkeiten von HTML5 sind mir aber (noch) nicht geläufig. Das bedeutet, dass ich mich hier ein wenig einarbeiten sollte. Der kurze Überblick klingt auf jeden Fall vielversprechend.

      ... oder die Tabelle als Grid gestalten?

      Das wären 10 Kanonen gegen einen Spatzen.

      Wenn mit Flexbox die Möglichkeit besteht, eine komplette Box mit einem Link zu hinterlegen, dann ist das sicher die Lösung.

      Ich danke dir sehr für diesen Hinweis.

      LG

      1. Hallo PadAmy,

        Die Alternative ist, den td eine feste Höhe zu geben. Ein td child mit height:100% geht nur dann schief, wenn die td keine explizite Höhe haben.

        Rolf

        --
        sumpsi - posui - clusi
        1. @@Rolf B

          Die Alternative ist, den td eine feste Höhe zu geben.

          Ich glaube nicht, dass das hier eine Alternative ist.

          Ein td child mit height:100% geht nur dann schief, wenn die td keine explizite Höhe haben.

          Das geht auch dann schief.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      2. @@PadAmy

        Muss es eine Table sein? Nein, muss es nicht. Obwohl es von den Inhalten her eigentlich eine typische Tabelle ist.

        Da fällt mir der gute alte Cheatah ein: „Die einzig relevante Frage ist: Handelt es sich um tabellarische Daten? […] Wenn ja, ist alles andere als eine Tabelle falsch.“

        Kannst Du die Zeilen als Flexbox ...

        Das könnte man auch mit tr-Elementen.

        ... oder die Tabelle als Grid gestalten? Das wären 10 Kanonen gegen einen Spatzen.

        Nein. Wenn es um Ausrichtung in 2 Dimensionen (Zeilen und Spalten) geht, ist Grid richtig und Flexbox eher falsch.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. @@Gunnar Bittersmann

          Kannst Du die Zeilen als Flexbox ...

          Das könnte man auch mit tr-Elementen.

          Sieht dann bspw. so aus.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. @@Gunnar Bittersmann

            Kannst Du die Zeilen als Flexbox ...

            Das könnte man auch mit tr-Elementen.

            Sieht dann bspw. so aus.

            Aber sagen Screenreader das dann noch als Tabelle an?

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          2. Hallo Gunnar,

            jaaa - diese Idee hatte ich nicht verfolgt, weil ein tr Element ja ab Werk mit display:table-row unterwegs ist. Welche Nachteile fange ich mir denn ein, wenn ich dem tr Element seinen nativen display-Modus wegnehme?

            Zum Beispiel heißt es in §2.4 der CSS Display Module Level 3 Spec:

            For example, Table Layout requires that a table-cell box must have a table-row parent box. If it is misparented, like so:

            <div style="display:block;">
              <div style="display:table-cell">...</div>
            </div>
            

            It will generate wrapper boxes around itself, producing a structure like:

            block box
            └anonymous table box
             └anonymous table-row-group box
              └anonymous table-row box
               └table-cell box
            

            Und deine Änderung der Display-Eigenschaft des tr produziert genau das, nehme ich an?

            Darüber hinaus funktioniert dann border-collapse:collapse nicht mehr.

            Vielleicht sollte man hier doch mit JS nachhelfen und einen click-Handler auf dem td definieren, der den click zum a Element delegiert?

            Rolf

            --
            sumpsi - posui - clusi
            1. @@Rolf B

              Welche Nachteile fange ich mir denn ein, wenn ich dem tr Element seinen nativen display-Modus wegnehme?

              Womöglich die Benutzbarkeit in Screenreadern.

              Und deine Änderung der Display-Eigenschaft des tr produziert genau das, nehme ich an?

              Ich glaub nicht. Ich packe ja nicht table-cell in block (was äußere Boxen für table, table-row-group und table-row generiert), sondern flex in table (worin keine inneren table-row-group-, table-row- und table-cell-Boxen sind). Man könnte aber sicher auch noch table { display: block } setzen.

              Vielleicht sollte man hier doch mit JS nachhelfen und einen click-Handler auf dem td definieren, der den click zum a Element delegiert?

              Sag ich doch.

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. @Gunnar Bittersmann @Rolf B

                Ich kann mir nicht vorstellen, dass in ein WP-Template ein eigenes JS-Schnipsel eingepflanzt werden kann. Ein wenig CSS + HTML ja - aber JS?

                Ich frage dort im Forum mal nach.

                Gruß

                1. Eigenes JS in WordPress geht. Ist aber nicht trivial (für mich zumindest).

                  Mir ist da eine reine CSS-Lösung wesentlich sympatischer.

                  LG

                2. Hej PadAmy

                  Ich kann mir nicht vorstellen, dass in ein WP-Template ein eigenes JS-Schnipsel eingepflanzt werden kann. Ein wenig CSS + HTML ja - aber JS?

                  Ich frage dort im Forum mal nach.

                  du hast hoffentlcih ein child-theme angelegt?

                  Marc

                  1. Hallo Marc,

                    Hej PadAmy

                    du hast hoffentlcih ein child-theme angelegt?

                    Nein, hab' ich nicht. Warum brauche ich ein child-theme?

                    Ich glaub, ich werd langsam depressiv.

                    1. Hej PadAmy,

                      du hast hoffentlcih ein child-theme angelegt?

                      Nein, hab' ich nicht. Warum brauche ich ein child-theme?

                      Ein child-theme ist nichts anderes, als ein leerer Ordner im Ordner „Themes“. Darin muss mindestens eine einzige CSS-Datei liegen, in dem auf das parent-Theme verwiesen wird. (Beispiele findest du in der sehr guten WP-Anleitung und auf tausenden von Webseiten)

                      Dieses Theme kannst du wie jedes andere im WP-Backend auswählen. Das tolle: du kannst in die CSS-Datei nun alles schreiben, was du möchtest, um das Aussehen des Eltern-Themes zu verändern (durch Ausnutzung der CSS-Cascade). Das heißt, du behältst das Layout des Original-Themes und überschreibst alles, was Dir nciht gefällt.

                      Aber das ist nicht auf CSS allein beschränkt. Wenn du am Seitenkop etwas verändern willst, kannst Du Dir die header.php in Deinen Thema-Ordner kopieren und dort ändern, was du magst. Das geniale: Du kannst auf das Original-Theme im parent-Theme weiterhin alle Updates fahren ohne irgendwas von Deinen Personalisierungen zu verlieren. It's bulletproof!

                      Ich glaub, ich werd langsam depressiv.

                      Lege lieber ein child-theme an 😉 — ist ganz einfach, siehe oben!

                      Marc

                  2. Hallo zusammen,

                    du hast hoffentlcih ein child-theme angelegt?

                    Was WordPress betrifft:

                    • Das Standardthema ist völlig ausreichend. Es muss nicht verändert werden.
                    • Es ist kein Blog, sondern eine eher statische Seite, die hin und wieder mit Inhalt gefüttert wird.
                    • Die einzige Ausnahme ist eine einfache Tabelle auf einer Seite. Ein Feld in dieser Tabelle soll bei MousOver komplett wie ein Link reagieren, so dass auch leere Stellen - also da, wo keine Minigrafik und kein Text ist - das Tabellenfeld zu einem Link wird.
                    • Dazu ist (siehe hier) nur wenig CSS nötig.
                    • Der Grund dafür ist der Besucher der Website. Stichwort Usability. Vor allem auf kleinen Bildschirmen (Smartphones) wird es für Benutzer schwer, den eher klein gehaltenen Inhalt diese Tabellenfeldes anzuklicken. Deshalb das ganze Feld.
                    • Das hierfür nötige CSS habe ich bisher im Backend in [Design - Custmizer - Zusätzliches CSS] eingetopft, weil ich denke, dass es da hingehört. Diesen Bereich gibt es ja (vermutlich) nicht nur aus Jux & Dollerei.
                    • Und es wäre (nach meiner Einschätzung) der Supergau für jeden Seitenbetreiber, wenn bei jedem WP-Update dieser Bereich verbrannt würde.
                    • Somit erhellt sich mir nicht, warum ein Child-Theme gebraucht wird. Ins Basisdesign wird ja nicht eingegriffen.
                    • Die endgültige Seite werde nicht ich betreiben, sondern ein Freund, der zwar sehr intelligent, aber 0 technikaffin ist. Es darf also nur ein Minimum "getrickst/gezaubert/gehext" werden

                    Was HTML & CSS betrifft:

                    • Aus o.g. Gründen möchte ich JS vermeiden. Immerhin konnte Gunnar zeigen, dass es auch ohne geht.

                    Vielleicht hilft das zum besseren Verständnis.

                    Ich bin hier im selfhtml-Forum. Dessen bin ich mir bewusst. Ich dachte, dass es zur Problemlösumg nur um CSS/HTML geht. Was hier ja eigentlich auch schön gezeigt wurde. Inzwischen tummle ich mich aber auch im WP-Forum, weil es so aussieht, als ob dieses kleine Problem auch dort hingehört.

                    Nach wie vor bin ich jedoch davon überzeugt, dass ich die Lösung hier finde und nicht dort. Ich bin nun wirklich gespannt, wie es ausgeht.

                    Allen, die sich hier einbringen, noch einmal meinen herzlichen Dank.

                    LG

                    1. Hej PadAmy,

                      Was WordPress betrifft:

                      • Die einzige Ausnahme ist eine einfache Tabelle auf einer Seite. Ein Feld in dieser Tabelle soll bei MousOver komplett wie ein Link reagieren, so dass auch leere Stellen - also da, wo keine Minigrafik und kein Text ist - das Tabellenfeld zu einem Link wird.

                      Egal ob viel oder wenig CSS — ich nutze dafür am liebsten meinen Leib- und Magen-Editor. Schon wegen der Möglichkeit git zu nutzen.

                      Muss aber für Dich nicht relevant sein.

                      Und: ok - wenn es sehr wenig Code ist, tut es der Customizr auch — ein Child-theme anzulegen ist bei mir halt einer der ersten Schritte in jeder WP-Site. Dann bin ich — egal wie viele Änderungen es in der Zukunft werden (meist werden es mit der Zeit immer mehr) — in der Lage darin weiter zu arbeiten.

                      • Der Grund dafür ist der Besucher der Website. Stichwort Usability. Vor allem auf kleinen Bildschirmen (Smartphones) wird es für Benutzer schwer, den eher klein gehaltenen Inhalt diese Tabellenfeldes anzuklicken. Deshalb das ganze Feld.

                      Wenn das der einzige Grund ist, gibt es auch andere Methoden, die simpler sind. Etwas wie das Folgende reicht dazu:

                      td a {
                       min-height: 2em;
                      }
                      

                      Allerdings dürfte die Lösung, die @Gunnar Bittersmann beschrieb, hübscher sein (hängt natürlich von dem Layout ab, das wir nicht kennen). Wenn das der Fall ist, mach es, wie Gunnar schrieb.

                      • Und es wäre (nach meiner Einschätzung) der Supergau für jeden Seitenbetreiber, wenn bei jedem WP-Update dieser Bereich verbrannt würde.

                      Wird er nicht!

                      • Somit erhellt sich mir nicht, warum ein Child-Theme gebraucht wird. Ins Basisdesign wird ja nicht eingegriffen.

                      Einfach eine andere Herangehensweise, s.o.

                      Was HTML & CSS betrifft:

                      • Aus o.g. Gründen möchte ich JS vermeiden. Immerhin konnte Gunnar zeigen, dass es auch ohne geht.

                      Wann immer möglich sollte auf JS für Layout verzichtet werden, Dafür ist schließlich CSS da.

                      Ich bin hier im selfhtml-Forum. Dessen bin ich mir bewusst. Ich dachte, dass es zur Problemlösumg nur um CSS/HTML geht. Was hier ja eigentlich auch schön gezeigt wurde. Inzwischen tummle ich mich aber auch im WP-Forum, weil es so aussieht, als ob dieses kleine Problem auch dort hingehört.

                      Vermutlich können wir Dir auch deine WP-Fragen beantworten 😉

                      Allen, die sich hier einbringen, noch einmal meinen herzlichen Dank.

                      Gerne!

                      Marc

                      1. Hallo Marc,

                        herzlichen Dank für deine ausführliche Antwort.

                        Ich bin mir recht sicher, dass ich mit der Lösung von Gunnar zurecht komme. Und was die Unterstützung bzgl. WordPress angeht, freue ich mich sehr und habe schon mal meine erste Frage. Da sie eher etwas mit dem Backend zu tun hat, mache ich mal keinen extra Thread auf.

                        Lieblingseditoren habe ich auch. Damit kann ich wunderbar strukturierten und damit lesbaren Code erzeugen. Und vor allem kann ich Kommentare einfügen - jeder Coder weiß, wie wichtig die sind.

                        Aber: Wenn der so erzeugte Code (betroffen ist HTML) im Textmodus von WP eingefügt wird, entstehen seltsame Ergebnisse:

                        • Kommentare erzeugen Leerzeilen, manchmal
                        • komplette Unterbrechungen im Design.
                        • Die Struktur des Quellcods ist im Eimer und somit
                        • kaum noch les- oder wartbar.

                        Gibt es hierfür einen Workaround?

                        LG

                        1. Hej PadAmy,

                          Ich bin mir recht sicher, dass ich mit der Lösung von Gunnar zurecht komme. Und was die Unterstützung bzgl. WordPress angeht, freue ich mich sehr und habe schon mal meine erste Frage. Da sie eher etwas mit dem Backend zu tun hat, mache ich mal keinen extra Thread auf.

                          Für neue Themen gerne extra Threads. Aber ist schon ok jetzt.

                          Wenn der so erzeugte Code (betroffen ist HTML) im Textmodus von WP eingefügt wird, entstehen seltsame Ergebnisse:

                          Ja, der Text-Modus ist kein reines HTML-Feld. Da wird umformatiert.

                          Gibt es hierfür einen Workaround?

                          Man kann andere WYSIWYG-Editoren in WP nutzen. Sicher gibt es auch einen, in dem es eine echte Möglichkeit für HTML gibt. Ich ahbe die aber nie benötigt und das ist ja auch cniht wirklich der Sinn, wenn man mit WP seinen Content managen will.

                          Ich arbeite mit meinem Editor nur um CSS-Code zu erzeugen. Obwohl ich zugeben muss, das mit den letzten Updates der Editor im Customizr richtig gut geworden ist und es mir so scheint, als ob von WP selber die Reise eher weg von den Child-Themes geht. Da gibt es doch eine ganze Menge Entwicklungen, die eigene Anpassungen ermöglichen und diese werden auch immer komfortabler.

                          Mal sehen ob diese Entwicklung anhält, dann werde ich womöglich bald nicht mehr zu Childthemes raten…

                          Marc

          3. Hallo Gunnar,

            @@Gunnar Bittersmann

            Kannst Du die Zeilen als Flexbox ...

            Das könnte man auch mit tr-Elementen.

            Sieht dann bspw. so aus.

            Diese Lösung gefällt mir ausgesprochen gut. Sie bietet genau das, was ich erreichen möchte - maximale Usability.

            Wenn ich mir allerdings das CSS anschaue, sehe ich, dass das über meine Möglichkeiten doch hinausgeht. Ich erkenne, dass der Code außerordentlich gut durchdacht, logisch und strukturiert ist. Und ich kann das CSS zwar genau nachvollziehen, den Durchblick, so etwas in dieser Komplexität selbst zu schreiben, habe ich aber leider nicht.

            Deshalb an dieser Stelle für dich:

            1. Respekt & großen Dank
            2. Chapeaux & Schulterklopf
            3. Bald eine PN

            LG

          4. Hej Gunnar,

            @@Gunnar Bittersmann

            Kannst Du die Zeilen als Flexbox ...

            Das könnte man auch mit tr-Elementen.

            Sieht dann bspw. so aus.

            Sieht hübsch aus - wobei ich hier keine tabellarischen (Beispiel-)Daten sehe. Was mich zurück zum guten alten Cheatah bringt... 😉

            Marc