pepebe: Tabelle mit css quadratisch gestalten

Hallo Kameraden,

Ich habe nun schon eine Weile herumexperimentiert, aber irgendwie komme ich zu keiner befriedigenden Lösung.

Ich habe mehrere Tabellen, die alle die gleichen Außenmaße haben sollen:

650x650px

Die Tabellen sind immer quadratisch, d.h. Anzahl Spalten = Anzahl Zeilen.

Am Kopf der Tabelle und in der ersten Spalte jeder folgenden Zeile liegt eine th Zelle als Spalten/Zeilenüberschrift.

Ich möchte, das egal wieviele Zeilen/Spalten ich habe,

  • Höhe und Breite der Zellen immer identisch,
  • alle td Zellen gleich groß und
  • die Gesammtbreite/Höhe der Tabelle immer 650px ist.

Probleme wegen der Tabelleninhalte hinsichtlich deren Größe sind nicht zu erwarten...

Gebt mir bitte einen sanften Schubs in die richtige Richtung...

Gruß,

pepebe

  1. Vor allem die Höhe der letzten Zeile bereitet mit Kummer. Da wird immer was weggeschnitten...

  2. Hallo pepebe,

    Ich möchte, das egal wieviele Zeilen/Spalten ich habe,

    • die Gesammtbreite/Höhe der Tabelle immer 650px ist.

    http://de.selfhtml.org/css/eigenschaften/tabellen.htm#table_layout
    http://de.selfhtml.org/html/tabellen/gestaltung.htm#breiten_hoehen

    Mit freundlichen Grüßen,
    André

    --
    Ein Geleitzug aus tausend Explosionen
    irgendwo in den Sternen verborgen
    relatives Sein zerbricht die Stille
    eine Träne flüstert Gottes Wille
    1. Danke Andre,

      die diesbezüglichen Quellen in selfhtml kenne ich. Leider bringen Sie mich nicht weiter.

      Da meine erste Nachricht wohl nicht detailiert genug war, werde ich ein wenig präziser.

      Die Tabelle zeigt ein Spielbrett und wird per php erstellt.

      Der Nutzer kann beliebig entscheiden welches Format die Tabelle haben soll (von 11x11 bis 27x27 Feldern).

      Tabellen sind immer quadratisch und passen immer in die 650x650px Box.

      Formatiert werden Höhe und Breite der Zellen natürlich über css und die height/width Angabe.

      Mein Problem: Ich kann und möchte nicht vorher feste Angaben darüber machen, wie hoch und wie breit eine Zelle bei einem bestimmten Tabellenformat ist.

      Die Breite läßt sich noch relativ gut kontrollieren:
      z.B. so:

      • table{table-layout: fixed;}
      • td, th {height:auto; width: auto;}

      Die Höhe der letzten Zeile verhält sich dann jedoch beharrlich nicht wie gewünscht.

      Alternativ könnte ich natürlich von php eine %Angabe errechnen lasse: 100/#Spalten = Angabe für Height/Width.

      Leider kommen da natürlich Zahlen mit vielen Nachkommastellen zustande und außerdem will ich ja gerade, daß der Browser das für mich entscheidet.

      Probiert es mal aus, dann versteht ihr wahrscheinlich was ich meine.

      Gruß,

      pepebe

      Hallo pepebe,

      Ich möchte, das egal wieviele Zeilen/Spalten ich habe,

      Mit freundlichen Grüßen,
      André

      1. Hallo pepebe,

        Mein Problem: Ich kann und möchte nicht vorher feste Angaben darüber machen, wie hoch und wie breit eine Zelle bei einem bestimmten Tabellenformat ist.

        Die Breite läßt sich noch relativ gut kontrollieren:
        z.B. so:

        • table{table-layout: fixed;}
        • td, th {height:auto; width: auto;}
          Die Höhe der letzten Zeile verhält sich dann jedoch beharrlich nicht wie gewünscht.

        Wenn die Seite von oben nach unten gerendert wird, muss doch bei z.B. 650px/11 Felder irgendwann bei height und width "auto" ein Rest als Platz zur Verfügung stehen?!

        Alternativ könnte ich natürlich von php eine %Angabe errechnen lasse: 100/#Spalten = Angabe für Height/Width.
        Leider kommen da natürlich Zahlen mit vielen Nachkommastellen zustande und außerdem will ich ja gerade, daß der Browser das für mich entscheidet.

        Und wenn du die dann abrunden lässt und das Spielfeld dann horizontal und vertikal mittig ausrichten lässt?

        Alternativ könntest du dein Stylesheet mit Variablen von PHP füllen lassen?

        Mit freundlichen Grüßen,
        André

        --
        Ein Geleitzug aus tausend Explosionen
        irgendwo in den Sternen verborgen
        relatives Sein zerbricht die Stille
        eine Träne flüstert Gottes Wille
      2. Die Tabelle zeigt ein Spielbrett und wird per php erstellt.

        pepebe,
        Zur Laufzeit des Scripts ist doch die Anzahl $n der td pro Zeile/Spate bekannt.

        Lege eine Mindestbreite bzw. -höhe $th der th fest. 650 - $th ergibt dann die Maximalbreite/-höhe aller td.

        Teile (650 - $th) / $n und nimm davon den ganzzahligen Anteil; das ergibt die Breite und Höhe eines td.

        Der zu 650 übrig bleibende Rest ist die Breite bzw. Höhe der th, das wird in der Regel etwas mehr als $th sein.

        Die so berechenten Werte lässt du von PHP ins HTML-Dokument schreiben (wahlweise auch in dessen Stylesheet).

        Live long and prosper,
        Gunnar

        --
        „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
      3. Hi,

        Der Nutzer kann beliebig entscheiden welches Format die Tabelle haben soll (von 11x11 bis 27x27 Feldern).

        Tabellen sind immer quadratisch und passen immer in die 650x650px Box.

        Dir ist klar, daß 650 weder durch 11 noch durch 27 teilbar ist? Da es nur ganze Pixel gibt, bleibt Dir nichts anderes übrig, als entweder en(ige) Feld(er) oder die Tabelle geringfgig zu verkleinern.

        Mein Problem: Ich kann und möchte nicht vorher feste Angaben darüber machen, wie hoch und wie breit eine Zelle bei einem bestimmten Tabellenformat ist.

        wieso nicht? Du generierst die Seite doch onehin dynamisch; da kannst Du auch die passenen Größen errechnen und angeben.

        freundliche Grüße
        Ingo

  3. Danke für eure Anregungen. Wie ihr mich bereits erinnert habt, gibt es keine halben Pixel und somit ist meine Problem nicht mit einer gleichmäßigen Aufteilung lösbar.

    Liegt eigentlich auf der Hand, aber mein Wunsch nach einer solchen Lösung hat meinen Realitätssinn ein wenig getrübt.

    Ich werde also nicht um eine php-seitige Lösung herumkommen...

    Gruß,

    pepebe

    Danke für eure Unterstützung.

    CLOSED !!!