Adam: Darstellung entweder Zeilenweise oder spaltenweise

Hallo zusammen,

ich suche eine Lösung für mein Darstellungsproblem von Zahlen. In einer dynamischen Tabelle sollen die "von - bis" werte entweder Zeilenweise oder Spaltenweise dargestell werden. Beispiel:

Wenn die Zelle breit genug ist, dann: 100 - 600

Wenn die Zelle zu schmall ist, dann:

100

600

Im Moment wird willkürlich so umgebrochen:

100 −

600

Vielen dank für Ihre Vorschläge im Vorraus.

  1. @@Adam

    In einer dynamischen Tabelle sollen die "von - bis" werte entweder Zeilenweise oder Spaltenweise dargestell werden.

    Ich glaube nicht, dass du da um einen media query drumrumkommst.

    <td>
    	<span class="min">100</span>&ndash;<span class="max">600</span>
    </td>
    
    @media (max-width: 21em)
    {
    	.min, .max { display: block }
    }
    

    Der Breakpoint richtet sich nach deinen Gegebenheiten (u.a. Anzahl der Spalten).

    Es sei denn, man schaut mit JavaScript, wie es passt. Dazu müsste man aber mehr über deine Tabelleninhalte wissen.

    LLAP 🖖

    --
    „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

    Folgende Beiträge verweisen auf diesen Beitrag:

    1. Hallo und Danke für eure Lösungvorschläge.

      Die Anzahl der Spalten kann zwischen 1 und 8 variieren. und die Werte können 1 bis 6 stellig sein. Also ich denke um das Ausrechnen der Breite (des Textes und des Feldes) komme ich irgendwie nicht herum. Media bezieht sich ja immer nur auf das Device

      Gruß Adam

      1. @@Adam

        Media bezieht sich ja immer nur auf das Device

        Nein, auf den Viewport. Das Browserfenster muss ja nicht die gesamte Bildschirmbreite einnehmen; es können im Browser noch Seitenleisten eingeblendet sein; …

        Also ich denke um das Ausrechnen der Breite (des Textes und des Feldes) komme ich irgendwie nicht herum.

        Doch. Indem du die Höhe ermittelst. Scheint mir sinnvoller: Wenn die Höhe größer ist als die Zeilenhöhe, hast du zwei Zeilen, dann willst du die vertikale Darstellung.

        Die Höhe der Tabellenzelle hilft dir da nicht weiter, wenn außer den Von-bis-Dingern noch andere Inhalte in der jeweiligen Tabellenzeile sind. Also in den tds für die Von-bis-Dinger noch ein zusätzliches Element, sagen wir mit class="range".

        Ich hab da mal was gebastelt.

        Die Funktion styleRanges() wird initial aufgerufen sowie bei jeder Änderung des Viewportgröße (also auch beim Drehen des Handys oder Tablets).

        Darin werden alle Tabellen auf der Seite durchgegangen. (Wenn du garantiert nur eine solche hast, kannst du das vereinfachen). Innerhalb jeder Tabelle wird der Schwellenwert ermittelt: ich hab zur Sicherheit die anderthalbfache Zeilenhöhe gewählt. Dann werden alle .range-Elemente durchgegangen und geprüft, ob deren Höhe größer ist als der Schwellenwert. Wenn ein solches gefunden wird, bekommt die Tabelle die Klasse narrow und die Schleife wird beendet. Den Rest erledigt CSS.

        (Ich bin davon ausgegangen, dass die Darstellung aller Von-bis-Dinger gleich sein soll; also wenn eins vertikal, dann alle anderen auch.

        Weiterhin bin ich davon ausgegangen, dass bei allen .range-Elementen dieselbe Schriftgröße und Zeilenhöhe verwendet wird. Sollte das nicht der Fall sein, nicht einmalig den Schwellenwert ermitteln, sonden innerhalb der Schleife für jedes .range-Element gesondert.)

        Das CSS erledigt auch die schon angesprochene Drehung des Bis-Strichs.

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
  2. Du hast:

    <td>100 - 600</td>
    

    Das müsstest Du wohl ändern:

    <td><span class="tdbreak">100</span><span class="tdbreak">-</span><span class="tdbreak">600</span></td>
    

    Im CSS dann ein Media-Query:

    span.tdbreak {
       display:inline;
    }
    
    @media (max-device-width: 70em) {
       span.tdbreak {
           display:block;
           width:100%;
           padding:0;
           margin:0;
           text-align:center;
       }
    }
    

    Den Wert der Breite des Ausgabeports ( des Browser-Fensters ) bei dem Du umbrechen willst musst du selbst herausfinden. Und nimm dort nicht etwa Pixel...

    Freilich kannst Du auch versuchen:

    <style>
    span.nobreak {
        white-space: nowrap
    }
    </style>
    
    <td>100<span class="nobreak">&nbsp;-&nbsp;</span>600</td>
    

    notieren. Das funktioniert aber nur wenn die Zahlen höchstens dreistellig sind, genauer genommen höchstens so breit dargestellt werden wie das Minus-Zeichen und die beiden No-Breaking-Spaces.

    Hinweise:

    1. @@ursus contionabundo

      <td><span class="tdbreak">100</span><span class="tdbreak">-</span><span class="tdbreak">600</span></td>
      

      Es genügt, entweder die Werte (wie gezeigt) oder den Bis-Strich in einzuspannen.

      Letzteres hätte den Charme, dass man bei vertikaler Darstellung auch den Bis-Strich drehen kann:

      100
        |
      600

      span.tdbreak {
         display:inline;
      }
      

      Überflüssig. Das span-Element ist sowieso schon inline.

      @media (max-device-width: 70em) {
      

      max-width, nicht max-device-width.

         span.tdbreak {
             display:block;
             width:100%;
             padding:0;
             margin:0;
      

      Überflüssig. Ein block-Element macht sich sowieso schon 100% breit und span hat null padding und margin.

             text-align:center;
      

      Bitte nicht. Textinhalte sollten linksbündig sein, Zahlen evtl. rechtsbündig.

      <td>100<span class="nobreak">&nbsp;-&nbsp;</span>600</td>
      

      notieren. Das funktioniert aber nur wenn die Zahlen höchstens dreistellig sind, genauer genommen höchstens so breit dargestellt werden wie das Minus-Zeichen und die beiden No-Breaking-Spaces.

      Nein! Ein Bis-Strich (‘–’ U+2013 en dash) ist kein Minus-Zeichen (‘−’ U+2212). Und ein Bindestrich (‘-’ U+002D Strichjunge) ist weder das eine noch das andere.

      Und der Bis-Strich wird üblicherweise ohne Leerzeichen davor und danach gesetzt. (Wikipedia)

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. @@Gunnar Bittersmann

        Wo wir gerade bei Typografie sind: Was ist hier falsch?

        „Bitte nicht. Textinhalte sollten linksbündig sein, Zahlen evtl. rechtsbündig.“ (gesetzt in Calibri)

        LLAP 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann

        Folgende Beiträge verweisen auf diesen Beitrag:

  3. hallo

    Hallo zusammen,

    ich suche eine Lösung für mein Darstellungsproblem von Zahlen. In einer dynamischen Tabelle sollen die "von - bis" werte entweder Zeilenweise oder Spaltenweise dargestell werden. Beispiel:

    Wenn die Zelle breit genug ist, dann: 100 - 600

    Wenn die Zelle zu schmall ist, dann:

    100

    600

    Im Moment wird willkürlich so umgebrochen:

    100 −

    600

    Vielen dank für Ihre Vorschläge im Vorraus.

    Mein Vorschlag ist, mache dir so viel Platz verfügbar wie die Tabelle braucht, und das heisst zur Not -> overflow:auto

    Ferner muss du auch an Screenreader denken. Die lesen Spaltenheader mit jeder Zelle vor Da kann es besser sein, Werte übber 2 Zellen zu verteilen

    Beispiel:

    <th>gültig von</th><th>gültig bis</th> <th>Breite in mm minimal</th><th>Breite in mm maximal</th>

    Meint - ein Minus, ein Bindestrich (oder bei deinem Umbruchversuch) eine verunglückte Bruchdivision? Vermeide dergleichen Ambiguität.

    Ferner kann man mit CSS eine tabelle zu einer Art Dataliste umformatieren (display:block) Hierbei ist es nützlich die erste Tabellenspalte als th mit scope Attribut zu notieren.

    1. @@beatovich

      Ferner kann man mit CSS eine tabelle zu einer Art Dataliste umformatieren (display:block)

      Dann ist es aber keine Tabelle mehr …

      Hierbei ist es nützlich die erste Tabellenspalte als th mit scope Attribut zu notieren.

      … sodass scope doch gar nicht mehr wirkt, oder?

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. hallo

        @@beatovich

        Ferner kann man mit CSS eine tabelle zu einer Art Dataliste umformatieren (display:block)

        Dann ist es aber keine Tabelle mehr …

        Du meinst kein grid mehr.

        Hierbei ist es nützlich die erste Tabellenspalte als th mit scope Attribut zu notieren.

        … sodass scope doch gar nicht mehr wirkt, oder?

        Na ja, es würde irrelevant.

        Ich verwende JS, um für alle User den th-Inhalt verfügbar zu machen.

        1. @@beatovich

          Ferner kann man mit CSS eine tabelle zu einer Art Dataliste umformatieren (display:block)

          Dann ist es aber keine Tabelle mehr …

          Du meinst kein grid mehr.

          Nein, ich meine „keine Tabelle mehr“.

          Es geht nicht um die visuelle Darstellung, sondern darum, wie assistive Technologie den Inhalt behandelt. Und wenn display:block im Spiel ist, dann behandelt AT das Zeug nicht mehr als Tabelle.

          Das mag man durchaus als fehlerhafte Implementierung ansehen. Man muss sich wohl aber damit abfinden.

          LLAP 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
          1. hallo

            Dann ist es aber keine Tabelle mehr …

            Du meinst kein grid mehr.

            Nein, ich meine „keine Tabelle mehr“.

            Es geht nicht um die visuelle Darstellung, sondern darum, wie assistive Technologie den Inhalt behandelt. Und wenn display:block im Spiel ist, dann behandelt AT das Zeug nicht mehr als Tabelle.

            Bad news. Man kann den Entwicklern auch Steine in den Weg werfen.

            Wird das scope Attribut berücksichtigt?