 Platzeinbußen durch Transpixel
 Die CSS-Lösung für Textboxen mit CSS formatiert finden sie unter:
Querverweise: 2 Beiträge beschreiben die Breiten- bzw. Höhenbestimmung von Tabellenzellen mit der Hilfe von transparenten Images.
 Zellenhöhe mit der Hilfe von transparenten Images
Zellenbreite mit der Hilfe von transparenten Images
Textspalten CSS-Rahmen Bsp. 01
Textspalten CSS-Rahmen Bsp. 01
Die Anfrage aus der 'Tabellenepoche':
|
... allerdings stoße ich dabei auf Probleme, wenn ich versuche, Tabellenspalten mit Hilfe des Transpixels auf eine bestimmte Spaltenbreite fest zu legen. Sobald ich ein solches Transpixel in der gewünschten Breite in die oberste Zeile meiner Tabelle einfüge, wird der in der Tabellenzelle
stehende Text nach links verschoben, und das eigentliche Ziel (feste Spaltenbreite) nicht erreicht.
Füge ich jedoch einen Zeilenwechsel in die Spalte ein, verändere ich die ursprüngliche Zellenhöhe. Lassen sich beide Effekte umgehen?
|
|
Hier bietet sich ein Trick an: Die "unsichtbare" Tabellenzeile.
Lösung 1)
die Tabellenbreite in einer seperaten Zeile zu bestimmen. Diese Zeile kann irgendwo innerhalb der Tabelle untergebracht sein, auch als letzte, ganz zu unterst als "unsichtbare" Tabellenzeile.
Lösung 2)
Die Zeile zur Breitenbestimmung als farbige Linie zur optischen Trennung einzusetzen.
|
|
Für die Zellenhöhe gilt anlalog das gleiche, allerdings mit Hilfe einer zusätzlichen, "unsichtbaren" Tabellezelle die neben den eigentlichen Zellen angeordnet wird.
Natürlich kann man eine 1 px breite Zelle auch zur Trennung oder als Rand einsetzen.
|
|
in einer separaten Zeile:
| Zelle 1 |
Zelle 2 |
| Zelle 3 |
Zelle 4 |
|
|
Demo:
| Zelle 1 |
Zelle 2 |
| Zelle 3 |
Zelle 4 |
|
|
Images hier nicht 130 sondern 128 breit wegen des Pixels für den eingeschalteten Rand.
als Linie zwischen den Zeilen
Demo:
Tabellenzeile 1
|
Tabellenzeile 1
|
|
|
Tabellenzeile 3
|
Tabellenzeile 3
|
als andersfarbige Linie (
Tabellenzeile 1
|
Tabellenzeile 1
|
|
|
Tabellenzeile 3
|
Tabellenzeile 3
|
als Linie, "getarnt" in den Zellenfarben
Tabellenzeile 1
|
Tabellenzeile 1
|
|
|
Tabellenzeile 3
|
Tabellenzeile 3
|
Falls der optische Höhenunterschied von einem Pixel durch die zusätzliche 2. Zeile zur Breitenbestimmung stört, kann man unter der 3. Tabellenzeile ebenfalls eine (4.) 1 px hohe Zeile in den Zellenfarben einfügen.
Demo:
Tabellenzeile 1
|
Tabellenzeile 1
|
|
|
Tabellenzeile 3
|
Tabellenzeile 3
|
|
|
Zusätzlich immer die Tabellenbreite auch im einleitenden Tabellentag festlegen, sonst bestimmen die Transpixel lediglich die Mindestbreite. Dieser Schutz wirkt nur bei Text. Breitere Images verbreitern die Tabelle natürlich.
<table width="" ... >
Das wird sie auch interessieren:
absolute Breite berechnen, Tabellenprobleme 04
|
WWW.WEB-TOOLBOX.NET
ZURÜCK