Zur Navigation

Tabellenspalte rechts soll breit bleiben

1 Christian (Gast)

Hallo... Ich melde mich hier zum ersten mal da ich den Tipp von einem Freund bekommen habe ;)

Mein Problem liegt bei einer Tabellenspalte. Ich möchte folgende Tabelle aufbauen:

<feste Breite>|<soll so breit sein, wie der Text hier drin>|<statische Breite>|<soll restliche Breite ausfüllen (mit text-align:right)>

Mein code sieht so aus:
td#background
{
height:44px;
background-image:url("background.png");
background-position:center top;
background-repeat:repeat-x;
padding:0px 20px 0px 20px;
color:#cccccc;
}

td#left
{
background-image:url("left.png");
background-position:right top;
background-repeat:no-repeat;
height:44px;
width:113px;
}

td#right
{
width: 13px;
background-image:url("right.png");
background-position:right top;
background-repeat:no-repeat;
height:44px;
}

td#holder
{
text-align:right;
height:44px;
}

<table cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td id="left"></td> <!-- hier feste Breite -->
<td id="background">soll so breit sein, wie der Text hier drin</td>
<td id="right"></td> <!-- hier feste Breite -->
<td id="holder">Soll rechts sein - ohne Balken</td> <!-- soll den Rest von den 100% Breite ausfüllen -->
</tr>
</table>

Ich dachte, das geht relativ einfach. Das einzige Problem ist nur, dass die Spalte mit der ID "background" ebenfalls Platz ausfüllt, der gar nicht benötigt wird. Müsste ich schätzen, würde ich sagen, dass "holder" und "background" die gleiche Breite haben.

Wie kann ich es nun so frickeln, dass "background" nur so Breit ist, wie der Text darin, und "holder" den Rest ausfüllt?

Danke schon einmal im voraus ;)

12.08.2010 20:07

2 Jörg Kruse

Die Browser verteilen die überschüssige Breite auf die nicht bezüglich der Breite definierten Tabellenzellen bzw. -spalten

Vielleicht kann mit der Eigenschaft display:inline-block die Breite von #background auf die Inhaltsbreite beschränkt werden - ich bin allerdings skeptisch, ob dies mit Tabellenzellen gelingt.

Folgen da noch weitere Tabellenreihen oder könnte man hier alternativ auch mit divs arbeiten?

12.08.2010 23:26 | geändert: 12.08.2010 23:27

3 Christian (Gast)

Divs wären mir natürlich viel lieber, aber das ist m.M.n. noch ein Level schwieriger zu realisieren. Zumindest ich für meinen Teil kriege das nicht hin :/

Danke :)

13.08.2010 19:18

4 Jörg Kruse

Mit einer einzelnen Tabelle wird man das so denke ich nicht hinbekommen.

Wenn du die letzte Spalte (#holder) aus der Tabelle rausnimmst und die Angabe width:100% entfernst, sollten die drei ersten Spalten ja eigentlich schon so angezeigt werden, wie du das möchtest?

Du kannst den Inhalt von #holder dann in ein div auslagern, welches du oberhalb der Tabelle platzierst

<div id="holder">Soll rechts sein - ohne Balken</div> <!-- soll den Rest von den 100% Breite ausfüllen -->

die Angaben für text-align und height kannst du von der gelöschten Zelle übernehmen, ebenso die Angaben von td#background.

Danach musst du die Rest-Tabelle nur noch über das div#holder legen - das kannst du mit position:absolute und einer passenden Angabe für top

14.08.2010 18:21

5 Christian (Gast)

Danke, die Idee ist spitze! Funktioniert prima :)
Vielen Dank und schönes Restwochenende.

14.08.2010 19:12

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]