HTML: Spaltenüberschrift unsichtbar machen...
- Ersteller Bob Byte
- Erstellt am
Bob Byte
Admiral Special
Hallo allerseits,
Ich habe folgendes Problem: ich habe einen Onlineshop aufgesetzt und die Bestellbestätigung die der Kunde bekommt ist total schief und krumm.
Zu 99% habe ich das alles gerade gebogen, aber ich habe ein Problem mit einer Tabelle.
Ich habe in der Tabelle an zwei Stellen jeweils eine Spalte eingefügt damit die Spaltenüberschriften nicht so dicht zueinander stehen. Die Spalten habe ich mit irgendwelchem Nonsens gefüllt.
Jetzt stimmen die Abständen, aber man sieht natürlich den Nonsens den ich eingetragen habe. Wenn dort aber die Schriftfarbe auf weiß setze ( damit es "unsichtbar") wird, zerreißt es mir die ganze Seite.
Wie das ganze in Farbe aussieht, sieht man im Anhang.
Der Code für die Tabelle sieht so aus:
Ich habe keine Idee mehr wie ich die Spaltenüberschriften unsichtbar machen kann... vielleicht gibt es ja auch eine andere Möglichkeit die Spalten auseinanderzuziehen...
Vielleicht habt ihr ja eine heiße Idee.
Gruß und vielen Dank
Bob Byte
Ich habe folgendes Problem: ich habe einen Onlineshop aufgesetzt und die Bestellbestätigung die der Kunde bekommt ist total schief und krumm.
Zu 99% habe ich das alles gerade gebogen, aber ich habe ein Problem mit einer Tabelle.
Ich habe in der Tabelle an zwei Stellen jeweils eine Spalte eingefügt damit die Spaltenüberschriften nicht so dicht zueinander stehen. Die Spalten habe ich mit irgendwelchem Nonsens gefüllt.
Jetzt stimmen die Abständen, aber man sieht natürlich den Nonsens den ich eingetragen habe. Wenn dort aber die Schriftfarbe auf weiß setze ( damit es "unsichtbar") wird, zerreißt es mir die ganze Seite.
Wie das ganze in Farbe aussieht, sieht man im Anhang.
Der Code für die Tabelle sieht so aus:
HTML:
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>{#head_units#}</th>
<th>{#head_products#}</th>
<th>{#head_artnr#}</th>
<th>ttttttt</th>
<th>{#head_single_price#}</th>
<th>tttttt</th>
<th><div align="left">{#head_price#}</div></th>
</tr>Vielleicht habt ihr ja eine heiße Idee.
Gruß und vielen Dank
Bob Byte
du könntest benutzen statt buchstaben... das sind nicht-ubmrechbare leerzeichen (non-breaking-space)
andernfalls könnte man um die tabelle aufzulockern mit einem cellpadding/cellspacing arbeiten, dann werden die zellen immer etwas größer als der enthaltene text...
oder, du legst in die Zellen die jetzt deinen nonsens-text enthalten einfach div-elemente hinein, denen du width:15px; oder sowas gibst...
möglichkeiten gibts viele.
Textfarbe weiß sollte dir allerdings nicht alles zerbröseln... ist aber ohnehin keine gute idee, wenn man davon ausgeht dass es mailprogramme gibt, wo man de default-background für e-mails auf eine beliebige farbe stellen kann... mag in manchen fällen besser sein für die Augen...
am einfachsten sollten die non-breaking-spaces sein.
andernfalls könnte man um die tabelle aufzulockern mit einem cellpadding/cellspacing arbeiten, dann werden die zellen immer etwas größer als der enthaltene text...
oder, du legst in die Zellen die jetzt deinen nonsens-text enthalten einfach div-elemente hinein, denen du width:15px; oder sowas gibst...
möglichkeiten gibts viele.
Textfarbe weiß sollte dir allerdings nicht alles zerbröseln... ist aber ohnehin keine gute idee, wenn man davon ausgeht dass es mailprogramme gibt, wo man de default-background für e-mails auf eine beliebige farbe stellen kann... mag in manchen fällen besser sein für die Augen...
am einfachsten sollten die non-breaking-spaces sein.
Bob Byte
Admiral Special
Danke für die Tipps, werde ich mal ausprobieren und weiterverfolgen.
Gruß Bob Byte
Gruß Bob Byte
Chris_Bear
Admiral Special
Ich würde etwas anders an die Sache herangehen. Einfach Spalten hinzufügen um Abstände zu verändern ist nicht die sauberste Art, und bringt eben in deinem Fall nicht die gewünschten Ergebnisse.
Erste Möglichkeit: Wenn'd dir primär um die eigentliche Breite der Spalten geht, schau dir mal <colgroup> an, damit kannst du die Breite aller Spalten bestimmen:
Zweite Möglichkeit: CSS ist dein Freund wenn's um Abstände geht
Kann natürlich auch beliebig kombiniert werden
Gruß,
Chris
Erste Möglichkeit: Wenn'd dir primär um die eigentliche Breite der Spalten geht, schau dir mal <colgroup> an, damit kannst du die Breite aller Spalten bestimmen:
HTML:
<table cellpadding="0" cellspacing="0">
<colgroup>
<col width="20%"/>
<col width="20%"/>
<col width="20%"/>
<col width="20%"/>
<col width="20%"/>
</colgroup>
<thead>
<tr>
<th>{#head_units#}</th>
<th>{#head_products#}</th>
<th>{#head_artnr#}</th>
<th>{#head_single_price#}</th>
<th><div align="left">{#head_price#}</div></th>
</tr>Zweite Möglichkeit: CSS ist dein Freund wenn's um Abstände geht
HTML:
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>{#head_units#}</th>
<th>{#head_products#}</th>
<th>{#head_artnr#}</th>
<th style="padding: 0 5px;">{#head_single_price#}</th>
<th style="padding: 0 5px;"><div align="left">{#head_price#}</div></th>
</tr>Kann natürlich auch beliebig kombiniert werden
Gruß,
Chris
Machst Du die Tabelle eigentlich nur fürs Layout? Keine gute Idee, weil Tabellen einerseits Darstellungsprobleme in unterschiedlichen Browsern nach sich ziehen können, aber es ist auch einfach sehr unübersichtlich im Code, gerade wenn Du das Layout hinterher nochmal verändern willst. CSS ist dafür die richtige Wahl. Eine Tabelle kann man dann nutzen, wenn man auch eine Tabelle darstellen will, aber die sollte möglichst einfach strukturiert sein und auch wieder durch CSS ausgerichtet und formatiert werden. Und zwar optimalerweise durch zentral definiertes CSS, nicht in jedem Element einzeln (was technisch dasselbe ist, aber extrem unübersichtlich).
Bob Byte
Admiral Special
Die Tabelle war schon vorher da, ich habe nur ein paar kleine Bugs beseitigt so das die Darstellung besser aussieht. Mittel-bis Langfristig werde ich das wohl mal komplett neu machen. Erstmal muss es aber so reichen .
Vielen vielen Dank euren Tipps !
Gruß Bob Byte
.Vielen vielen Dank euren Tipps !
Gruß Bob Byte
Dem einwadn gegen das Tabellen.Layouting kann ich nur beipflichten, allerdings gibt es Fälle wo es nicht anders geht... es ist z.b. fast unmöglich ein <div> - element die volle Höhe einnehmen zu lassen wenn es darüber oder darunter noch andere elemente gibt (mit variabler größe, also feste pixelangaben ist nicht) und sein eigener content zu klein ist um das Div in die länge zu ziehen...
Hier braucht man entweder eine Tabelle oder den CSS-Stil display:table-cell.
Technisch gesehen absolut köstlich auf Tabellen fürs layout zu verzichten und dann per CSS divs zu tabellenzellen zu machen
Aber lustig was so alles geht....
Hier braucht man entweder eine Tabelle oder den CSS-Stil display:table-cell.
Technisch gesehen absolut köstlich auf Tabellen fürs layout zu verzichten und dann per CSS divs zu tabellenzellen zu machen
Aber lustig was so alles geht....
manfredgockel
Cadet
- Mitglied seit
- 20.01.2011
- Beiträge
- 8
- Renomée
- 0
andererseits gibt es auch immer wieder probleme bei komplexen aufbauten in css. um tabellen wird man nicht rumkommen können, welche browser haben deiner meinung nach darstellungsprobleme? IE5 ?
Du könntest auch mit den Werten von cellpadding und cellspacing spielen. Allerdings beeinflusst du damit auch den Abstand nach oben und unten. Aber vielleicht ist das ja sogar gewünscht.
In dem Fall würde ich aber auch der Spalte eine Breite geben (also mit width="xxx"). Wenn du das alles den Browser überlässt kommen da teilweise ziemlich komische Konstrukte dabei raus.
Gruß,
Max
In dem Fall würde ich aber auch der Spalte eine Breite geben (also mit width="xxx"). Wenn du das alles den Browser überlässt kommen da teilweise ziemlich komische Konstrukte dabei raus.
Gruß,
Max
