Tabellen verlinken
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
bestimmen
browser
code
fazit
funktionell erforderlichen tabellen
machen
problem
realisieren
schrift
server
spalte
spalten
string
tabelle
unterschiedlich darstellen
url
vorhaben
vorstellen
zeile
-
Hi,
ich habe auf einer Seite mehrere Tabellen (voneinander getrennt). Ich würde gerne erreichen, dass sich die Spalten, die sich ja variabel an den Inhalt anpassen, auch unter den verschiedenen Tabellen anpassen. (Das dies mit JS möglich ist ist klar, ich suche aber gezielt nach einem Weg ohne JS, falls sowas überhaupt möglich ist.)
Das heisst, dass wenn die Tabelle oben 4 Spaleten hat dann sind die Spalten jeweils so breit wie die Tabelle weiter unten. Ändert sich die Breite der 2. Spalte in der obersten Tabelle (aufgrund größeren Inhaltes) so soll sich dazu kongruent auch die Spalte der Tabelle weiter unten anpassen.
Ziel ist es, einfach die übersichtlichkeit zu wahren, da beide Tabellen eine (fast) gleiche Header-Beschriftung haben und es einfach komisch aussieht und die Übersichtlichkeit mindert, wenn die Spalten irgendwie verteilt sind.
Ich hoffe jemand hat hierzu Erfahrung oder kann mir da weiterhelfen :)
Liebe Grüße und vielen Dank im Vorfeld! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Wie darf ich mir das bitte vorstellen, kannst du mal deinen Code Posten, bzw. Einen Link ? Warum benutzt du 2 Tabellen, wenn du gleiche Tabellenkopfe hast ? Lass doch eine Zeile frei!? Oder gib deinen Tabellenkopf doch per css eine feste Größe.
Gruß -
Per php im html Code kannst du die beiden tabelle mit echo ausgeben und merkst dir die breite in einer Variable für die 2. Tabelle.
php im html nicht schön aber geht auch.
-
Über PHP wäre dies auch möglich. Allerdings müsste der User dann bspw zuerst sagen, dass er 3 oder 4 Spalten möchte, dies würde dann an den Server also PHP gesendet werden und mit php kannst du das dann editieren. Wenn du das Problem Clientseitig lösen willst, kommst du wohl nicht an Javascript vorbei...
-
michaelkoepke schrieb:
Wie darf ich mir das bitte vorstellen, kannst du mal deinen Code Posten, bzw. Einen Link ? Warum benutzt du 2 Tabellen, wenn du gleiche Tabellenkopfe hast ? Lass doch eine Zeile frei!? Oder gib deinen Tabellenkopf doch per css eine feste Größe.
Gruß
Es gibt keinen Code, ist ein "Modell in Gedanken".
Ich habe 2 Tabellen, die Informationen (Zeilen) sind gleich aber anderen "Großkategorieen" untergeordnet also in verschiedene Abschnitte gegliedert. Daher die Situation.
Einfacher Beispielcode, mal dahingeschrieben:
<!-- Abschnitt1--> <div> <h2>Block1</h2> <table> <thead> <tr> <td>Nr</td> <td>Name</td> <td>Info</td> <td>X</td> </tr> </thead> <tbody> <tr><td>1</td><td>bsp1</td><td>kleine Info</td><td>X</td></tr> <tr><td>2</td><td>bsp2</td><td>kleiner Text</td><td>X</td></tr> <tr><td>3</td><td>bsp3</td><td>guten Tag</td><td>X</td></tr> </tbody> </table> </div> <!-- [...] --> <!-- Abschnitt2--> <div> <h2>Block2</h2> <table> <thead> <tr> <td>Nr</td> <td>Name</td> <td>Info</td> <td>X</td> </tr> </thead> <tbody> <tr><td>1</td><td>bsp1</td><td>kleine Info</td><td>X</td></tr> <tr><td>2</td><td>bsp2</td><td>riesiger text der dafür sorgt, dass... der Löschenbutton (X) jetzt viel weiter rechts ist als in der Tabelle aus Block1</td><td>X</td></tr> <tr><td>3</td><td>bsp3</td><td>guten Tag</td><td>X</td></tr> </tbody> </table> </div>
Wie gesagt nur ein Beispiel, daher bitte keine Ansätze zum Lösen einer konkreten Situation. Die Lösung soll ja auf alle
Szenarien passen, d.h. nocheinmal das Problem:
Problem: 2Tabellen mit kongruenten Zeilenbreiten.
Bedingung: Gleiche Anzahl an Spalten
Bsp: So wie auch innerhalb einer Tabelle
sjay96 schrieb:
Über PHP wäre dies auch möglich. Allerdings müsste der User dann bspw zuerst sagen, dass er 3 oder 4 Spalten möchte, dies würde dann an den Server also PHP gesendet werden und mit php kannst du das dann editieren. Wenn du das Problem Clientseitig lösen willst, kommst du wohl nicht an Javascript vorbei...
webdave schrieb:
Per php im html Code kannst du die beiden tabelle mit echo ausgeben und merkst dir die breite in einer Variable für die 2. Tabelle.
php im html nicht schön aber geht auch.
Ich kann mir schwer vorstellen wie das Problem mit php lösbar sein sollte. Man müsste ja Serverseitig analysieren, ob zB. ein p-Tag in der Tabelle eine Breite 300 hat, was im styles.css global geregelt ist und darauf reagieren, was mir unmöglich erscheint. Ausserdem macht es auch keinen Sinn, weil Styles etc. ja alles Clientseitig läuft. D.h. wenn überhaupt wird es über Javscript gehen, das ist dann auch kein problem das umzusetzen. Es geht mir aber um die Frage, ob es auch eine html-Variante gibt (Scriptlos) :)
Vielen Dank und Grüße
-
Ich vermute mal, daß Du ohne Javascript nicht zum Ziel kommst.
CSS tut sich, außer bei Pseudos wie Hover &Co., schwer damit, Veränderungen zu erkennen.Mir fällt jetzt, wenn zumindest das mit CSS ginge, auch kein brauchbarer Weg ein, den ermittelten Wert der Breite an das, zu verändernde Objekt weiter zu reichen.
Eine reine Lösung mit php wäre nur möglich, wenn Spaltenbreite und -anzahl vor Auslieferung an den Browser bekannt ist. Laufweiten von Schriften in Strings zu bestimmen, ist aber keine Stärke von php und selbst wenn, scheitert das Vorhaben letztlich auch daran, daß Browser unterschiedlich rendern, bzw. Schriften unterschiedlich darstellen.
Es gibt einen Workaround, der ohne CSS, PP, Javascipt oder was auch immer auskäme. Den mag ich aber nicht wirklich empfehlen:
Mittels eines reinen Tabellenkonstruktes ließe sich das einfach realisieren.
Es wird eine einzige Tabelle mit x Spalten angelegt. Alles zwischen den funktionell erforderlichen Tabellen wird als mehrspaltige Zelle (colgroup=Spaltenanzahl) definiert.
So hätte man es, auch wenn sich heute die Haare sträuben, früher schnell und wirksam umgesetzt. Tabellenlayouts sind, wenn es um optische Anforderungen geht, manchmal nicht so schlecht, wie man sie immer macht.
Es gibt aber, aus diversen Gründen, die die meisten Webdesigner runterbeten können, genug Gründe, die eine solche Lösung verbieten.
Fazit: Javascript scheint mir die einzig praktikable Lösung zu sein. Da das Ansinnen rein kosmetischer Natur ist, sehe ich auch keinen Grund, hier auf den Einsatz von Javascript zu verzichten.
-
fatfreddy schrieb:
Eine reine Lösung mit php wäre nur möglich, wenn Spaltenbreite und -anzahl vor Auslieferung an den Browser bekannt ist. Laufweiten von Schriften in Strings zu bestimmen, ist aber keine Stärke von php und selbst wenn, scheitert das Vorhaben letztlich auch daran, daß Browser unterschiedlich rendern, bzw. Schriften unterschiedlich darstellen.
Eben, ausserdem wäre dann immernoch das Problem, dass php erstmal das css analysieren müsste ganz zu schweigen von aller Art Laufzeitänderungen / Änderungen im Clienten, nachdem die Seite vom Server "gebaut" wurde.
fatfreddy schrieb:
CSS tut sich, außer bei Pseudos wie Hover &Co., schwer damit, Veränderungen zu erkennen.Mir fällt jetzt, wenn zumindest
Es gibt einen Workaround, der ohne CSS, PP, Javascipt oder was auch immer auskäme. Den mag ich aber nicht wirklich empfehlen:
Mittels eines reinen Tabellenkonstruktes ließe sich das einfach realisieren.
Es wird eine einzige Tabelle mit x Spalten angelegt. Alles zwischen den funktionell erforderlichen Tabellen wird als mehrspaltige Zelle (colgroup=Spaltenanzahl) definiert.
So hätte man es, auch wenn sich heute die Haare sträuben, früher schnell und wirksam umgesetzt. Tabellenlayouts sind, wenn es um optische Anforderungen geht, manchmal nicht so schlecht, wie man sie immer macht.
Es gibt aber, aus diversen Gründen, die die meisten Webdesigner runterbeten können, genug Gründe, die eine solche Lösung verbieten.
Darüber habe ich auch nachgedacht. Das macht dan aber das 'optisch schöne' dafür im Code umso hässlicher. Ausserdem stecken dann alle Module (Blöcke) in einer Tabelle fest, das zerstört den schönen modularen Aufbau :)
fatfreddy schrieb:
Fazit: Javascript scheint mir die einzig praktikable Lösung zu sein. Da das Ansinnen rein kosmetischer Natur ist, sehe ich auch keinen Grund, hier auf den Einsatz von Javascript zu verzichten.
Ich habs mir ja eigentlich gedacht :) Aber das sollte ja kein Problem sein. Mit offsetWidth müsste ich ja eigentlich an die Breite kommen. Dann muss lediglich immer an das größte angepasst werden.
Vielen Dank und liebe Grüße -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
