CSS: beliebig viele Reihen und Spalten gleicher Größe
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
anzahl
aussage
bereich
code
einbinden
element
inhalt
position
problem
problemlos klappen
regel
reihe
spalten
stelle
tabelle
treffen
vergeben
verzichten
zelle
-
Also ich habe hier eine Tabelle fester Größe, die von einem PHP-Skript generiert wird. Von dieser Tabelle weiß ich aber noch nicht, wieviele Reihen und wieviele Spalten sie haben wird. Jetzt möchte ich ein CSS erstellen, dass alle Reihen und Spalten gleich groß macht, unabhängig von ihrem Inhalt. Und ich würde nur ungerne jedes <td> mit z.B.
bestücken. Die Frage ist jetzt: gibt es da mit CSS eine elegante Lösung ?style="width: <?=100/$Anzahl>%;"
Liebe Grüße
- VampireSilence
Beitrag zuletzt geändert: 28.11.2010 15:58:50 von vampiresilence -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Naja du konntest anstelle von inlineSytle auf die styleTags im Header zurückgreifen.
Andre -
Da CSS (< 3) keine Logik beinhaltet, kann man das per CSS (only) nicht lösen, sondern muss auf Scriptsprachen (PHP, JS, ...) zurückgreifen. Da macht PHP sicherlich mehr Sinn als JS.
-
das ist Problemlos in CSS < 3 möglich, du musst nur wissen wie viele Zeilen/Spalten deine Tabelle hat. Wenn du es zu dem Zeitpunkt noch nicht kennst kannst du die gesendete Ausgabe nochmal bearbeiten.
-
andre-morillon schrieb:
das ist Problemlos in CSS < 3 möglich, du musst nur wissen wie viele Zeilen/Spalten deine Tabelle hat.
Genau das ist ja das Problem, dass diese Angabe nicht bekannt ist. Und somit ist das mit reinem(!) CSS nicht möglich. -
trueweb schrieb:
Genau das ist ja das Problem, dass diese Angabe nicht bekannt ist. Und somit ist das mit reinem(!) CSS nicht möglich.
Ok und wie kommt dann so etwas zu Stande? Wenn die Anzahl nicht bekannt ist?
vampiresilence schrieb:
style="width: <?=100/$Anzahl>%;"
Gruß
Beitrag zuletzt geändert: 28.11.2010 18:19:14 von andre-morillon -
hi,
ich würde schon
benutzen, allerdings nicht für jedes td einzeln, sondern für alle td's zusammen, also in einem css-bereich:width: <?=100/$Anzahl>%;
#TABELLENID td { width: <?=100/$Anzahl>%; height: <?=100/$Anzahl>%; }
das sollte problemlos klappen...
du könntest, falls nicht alle tds betroffen sein sollen, auch noch Klassen vergeben...
ich an deiner Stelle würde auch (fast) ganz auf style="" verzichten und alles in externe css-dateien einbinden, wobei bei diesem Fall der css-Code schon intern sein muss, aber getrennt vom html-code ;)
lg Ole -
ole-reglitzki schrieb: hi,
ich würde schon
benutzen, allerdings nicht für jedes td einzeln, sondern für alle td's zusammen, also in einem css-bereich:width: <?=100/$Anzahl>%;
#TABELLENID td { width: <?=100/$Anzahl>%; height: <?=100/$Anzahl>%; }
das sollte problemlos klappen...
du könntest, falls nicht alle tds betroffen sein sollen, auch noch Klassen vergeben...
ich an deiner Stelle würde auch (fast) ganz auf style="" verzichten und alles in externe css-dateien einbinden, wobei bei diesem Fall der css-Code schon intern sein muss, aber getrennt vom html-code ;)
lg Ole
sagte ich das nicht bereits in meinem ersten Post?? -
Ich habe gerade mal eine css-lösung ausgetüftelt.
Ob Dir das ergebniss gefällt & ob es sinnvoll ist steht auf einem anderen Blatt....
Grundsätzlich ist es ja so das sich die td's ja sowieso Automatisch von der größe anpassen wenn Du dem table-element eine Feste Breite gibst.
"Problem" dabei sind nur Inhalte die größer als die Zelle sind, sie "drücken" die gesamte Spalte auf.
Also meine Lösung mit 2 verschachtelten div's overflow & position relative/absolute:
'blup' ist die id des table-elements
klick mich
css
<style type="text/css" > #blup {width: 300px} #blup tr td div{position: relative; top:0; left:0;witdh: 1em; height: 1em;} #blup tr td div div{witdh: 1em; overflow: visible; position: absolute; top: 0; left: 0;}
html
<td> <div> <div> #DEIN INHALT# </div> </div> </td>
Nachteile:
-zu großer Inhalt "fließt über"
-die Höhe der Zellen muss Fest sein (bei mir 1em)
Um es kurz zusammenzufassen: Entweder Du "trickst" irgendwie mit css oder Du überlegst Dir ob es nicht andere wege zum Ziel gibt (siehe meine vorredner)
Beitrag zuletzt geändert: 28.11.2010 20:19:19 von simuliertes -
Ok, also es ist so, dass ich eine externe CSS nachlade, in der die Regel bereits vorhanden sein soll. Das heisst, das CSS müsste von sich aus so dynamisch sein, dass es mit einer beliebigen Zahl an Spalten und Zeilen, trotzdem noch das gleiche Ergebnis liefert. Ich dachte jetzt an sowas, wie
Das ist so in der Form natürlich Quatsch, aber ich hoffe, so wird klarer, was ich versuche zu erreichen. Denn das was ich hier ausnutzen möchte ist, dass die Spalten im Grunde ja gleich breit dargestellt werden, wenn(! und hier liegt der Knackpunkt) die Inhalte gleich sind. Das CSS müsste also nur die Inhalte außen vor lassen und alles wäre in Butter. Ob da ein Javascript so der Brüller wäre, wage ich zu bezweifeln, da die Spalten und Reihen eine hohe Zahl erreichen können.table.equal td {height-style: ignore-filling; width-style: ignore-filling;}
Und das mit der $Anzahl war jetzt nur ein Beispiel, denn seitens PHP könnte ich die Anzahl natürlich zählen und ausgeben lassen, allerdings wäre dann auch in inline-style notwendig und das wäre für mich jetzt nur eine Notlösung.
Liebe Grüße
- VampireSilence
Beitrag zuletzt geändert: 29.11.2010 18:59:25 von vampiresilence -
Also:
-Du willst das die Zellen (td's) immer gleich groß sind, egal wie groß der Inhalt ist.
-Die Tabelle hat eine Feste Breite
Beispiel: 300px breite Tabelle mit 10 Spalten = jede Zelle ist 30px Breit egal ob der Inhalt 2px oder auch 200 px groß ist.
Frage:
-Was soll mit dem Inhalt passieren wenn er zu groß ist? (Überlappen, abschneiden oder Scrollbalken?)
-Hat die Tabelle auch eine Feste Höhe oder soll die sich dem Inhalt anpassen?
Wenn die Antwort wäre, Uberlappen & Feste Höhe funktioniert mein css.
Oder habe ich immer noch falsch verstanden was Du willst?
Beitrag zuletzt geändert: 30.11.2010 2:56:38 von simuliertes -
wie wäre es denn mit php oder javascript einen inline css code zu printen. einfluss auf den div nimmt dann nur der geprintete inline style
-
marius71 schrieb:
wie wäre es denn mit php oder javascript einen inline css code zu printen. einfluss auf den div nimmt dann nur der geprintete inline style
Wie ich schon mehrfach sagte: Wäre nur ne Notlösung.
@simuliertes:
Wenn die Inhalte zur groß werden, dann kann die Höhe ruhig mitwachsen, das ist egal. Was dann immernoch zu breit ist, soll überlappen (hidden), aber das wird eher selten der Fall sein, da es allesamt nur kleinere Elemente sind, die dann wrappen können.
Liebe Grüße
- VampireSilence -
Tja, ich fürchte aber dann wird nix aus der reinen css-Lösung, weil ich mir gerade nicht vorstellen kann wie man es anstellen könnte nur mit css dafür zu sorgen das in der Breite abgeschnitten (hidden) wird aber in der Höhe sich das Element anpassen soll.
Es müsste schon eine Regel für Höhe & Breite sein....
Beitrag zuletzt geändert: 30.11.2010 20:16:02 von simuliertes -
Ja, das Problem bei deinem anderen Vorschlag ist, dass du mit
ja eine feste Breite angibst, die ich noch garnicht kenne. Wenn meine Tabelle 1000px breit ist und 5 Elemente reinkommen, dann müssen die ja 200px breit sein. Und wenn nur 4 hinein kommen, dann müssen die alle 250px breit sein. Also kann ich dort ja vorher keine Aussage treffen.#blup {width: 300px}
Liebe Grüße
- VampireSilence -
vampiresilence schrieb:
Ja, das Problem bei deinem anderen Vorschlag ist, dass du mit
ja eine feste Breite angibst, die ich noch garnicht kenne. Wenn meine Tabelle 1000px breit ist und 5 Elemente reinkommen, dann müssen die ja 200px breit sein. Und wenn nur 4 hinein kommen, dann müssen die alle 250px breit sein. Also kann ich dort ja vorher keine Aussage treffen.#blup {width: 300px}
Liebe Grüße
- VampireSilence
Die 300px sind die Gesamtgröße , also in Deinem Beispiel wären es 1000px.
Jetzt wo die Seiten wieder Funktionieren, klick mal auf den Link in meiner ersten Antwort. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
