TSO: Tabellenbreiten stylen…

Hi,

mich würde mal interessieren: Was ist so der übliche Weg um Breiten, sowie Sichtbarkeit von Tabellenspalten zu stylen?

Bisher bin ich eigentlich so vorgegangen, dass ich am Anfang der Tabellen mit colgroup und col gearbeitet habe und den col-Tags jeweils eine ID zugewiesen habe, denen ich dann per CSS einen Wert für width gegeben hab.
Für eine einfache Breitenzuweisung hat das soweit immer gut funktioniert, bis ich jetzt kürzlich für schmale Screens eine Spalte ausblenden wollte. Ich hatte gehofft durch ein "display:none;" auf dem col-Tag die Spalte als ganzes ausblenden zu können, aber das hat nicht funktioniert. Schlimmer noch: Die festgelegten width-Werte für die darauffolgenden Spalten haben sich plötzlich auf die falschen Spalten bezogen.
Ich würde auch nur ungerne den HTML-Code aufblähen und Klassenbezeichnungen in jeder Tabellenzeile neu aufführen.

Bleibt da tatsächlich nur die Möglichkeit mit "tr *:nth-child(x)" für alle Spalten zu arbeiten?

  1. Om nah hoo pez nyeetz, TSO!

    Für eine einfache Breitenzuweisung hat das soweit immer gut funktioniert, bis ich jetzt kürzlich für schmale Screens eine Spalte ausblenden wollte. Ich hatte gehofft durch ein "display:none;" auf dem col-Tag die Spalte als ganzes ausblenden zu können, aber das hat nicht funktioniert.

    Wenn es sich um tabellarische Daten handelt, warum ist dann eine Tabellenspalte plötzlich nicht mehr wichtig? Vielleicht suchst du einfach nur eine responsive Tabelle?

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Spinne und Spinner.

    1. Wenn es sich um tabellarische Daten handelt, warum ist dann eine Tabellenspalte plötzlich nicht mehr wichtig?

      Die Daten innerhalb eines Datensatzes haben in den seltensten Fällen alle die gleiche Priorität. Vielmehr ist es doch so, dass sich diese je nach Situation und Anwendungsfall unterscheidet.
      Manche Daten sind einfach nur „nice to have” und sollten eben, abhängig von der Situation, den wichtigeren Daten weichen, wenn kein Platz mehr da ist.

      Davon abgesehen ist „Platzmangel” ja auch nur ein möglicher Grund, aus dem man eine bestimmte Spalte eventuell nicht anzeigen möchte.

      Vielleicht suchst du einfach nur eine responsive Tabelle?

      In der Tat ist meine Tabelle bereits responsive. Unterhalb einer Mindestbreite verzichte ich völlig auf die tabellarische Darstellung und wechsele zu einer Block/Inline-Block-Darstellung. Aber auch in dem Fall wäre es m.E. sehr praktisch, wenn ich die Daten innerhalb einer Tabellen-Spalte gemeinsam stylen könnte ohne nth-child verwenden zu müssen.

      1. Om nah hoo pez nyeetz, TSO!

        In der Tat ist meine Tabelle bereits responsive. Unterhalb einer Mindestbreite verzichte ich völlig auf die tabellarische Darstellung und wechsele zu einer Block/Inline-Block-Darstellung. Aber auch in dem Fall wäre es m.E. sehr praktisch, wenn ich die Daten innerhalb einer Tabellen-Spalte gemeinsam stylen könnte ohne nth-child verwenden zu müssen.

        col und colspan sind schon besondere Elemente. Deren visuelle Kinder sind nämlich keine Kinder im Quelltext. Deshalb, denke ich, wirst du um nth-child nicht umhin kommen oder auf JavaScript zurückgreifen müssen. Siehe auch http://forum.de.selfhtml.org/archiv/2012/2/t208885/#m1421085

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pan und Panther.

        1. Om nah hoo pez nyeetz, TSO!

          col und colspan sind schon besondere Elemente. Deren visuelle Kinder sind nämlich keine Kinder im Quelltext. Deshalb, denke ich, wirst du um nth-child nicht umhin kommen oder auf JavaScript zurückgreifen müssen. Siehe auch http://forum.de.selfhtml.org/archiv/2012/2/t208885/#m1421085

          Schade. Aber dann lässt es sich wohl nicht ändern.

          Frohe Ostern noch.

          1. Hi,

            col und colspan sind schon besondere Elemente. Deren visuelle Kinder sind nämlich keine Kinder im Quelltext. Deshalb, denke ich, wirst du um nth-child nicht umhin kommen oder auf JavaScript zurückgreifen müssen. Siehe auch http://forum.de.selfhtml.org/archiv/2012/2/t208885/#m1421085
            Schade. Aber dann lässt es sich wohl nicht ändern.

            wirklich nicht? Wenn du doch schon die Breiten der Spalten über das col-Element regulierst, warum setzt du die Breite dann zum "Ausblenden" nicht auf 0 (oder auf wenige px, so dass man gerade noch erkennt, dass dort noch etwas sein könnte)?

            Ciao,
             Martin

            --
            Man sollte keinen Senf von sich geben, wenn man nicht auch das Würstchen dazu liefern kann.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  2. @@TSO:

    nuqneH

    mich würde mal interessieren: Was ist so der übliche Weg um Breiten, sowie Sichtbarkeit von Tabellenspalten zu stylen?

    visibility: collapse

    Aber in Zielbrowsern testen! Möglich, dass einige immer noch rumzicken.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)