[html/css] relatieve verdeling ruimte gespande column

[Verwijderd]

Ik zit met het volgende probleem:

In een HTML table heb je de mogelijkheid om 1 cell meerdere columns te laten spannen dmv het welbekende colspan attribuut. Op het moment dat ik dit gebruik, en de cell die meerdere columns spanned heeft de grootste content tov de andere cells, dan is er ruimte over die verdeelt moet worden over de andere colommen.

Code voorbeeld:

HTML:

<tr>
    <td> content1 </td> <td style="text-align: center;"> x </td>
</tr>
<tr>
    <td colspan="2"> lange content die breedte bepaald </td>
</tr>

Als ik dit probeer met bv firefox, dan krijgt de cell met content1 telkens alle ruimte, terwijl ik wil dat de layout manager alle vrije ruimte aan de cell met inhoud x toebedeeld.

Het visuale effect wat ik voor ogen heb is het volgende:

code:

  content          x
  lange content die breedte bepaald

Ik wil dus graag dat de cell breedte van "content" minimaal is (precies passend voor het woordje "content" en de cell met "x" alle vrije ruimte (zodat "x" precies in de volledige vrije ruimte gecentreerd kan worden).

Onder Java kan ik met de gridbag layout precies zeggen welk percentage van de vrij te verdelen ruimte naar welke cell toegaat. Onder HTML kan het equivalent echter niet vinden.

Bestaat dit wel, en zo ja hoe pas ik dit toe?

[ Voor 7% gewijzigd door Verwijderd op 15-03-2005 20:57 . Reden: geen monospaced font for code section :( ]

[Glabbeek]

code:

<td> content1 </td> <td style="text-align: center; width:100%"> x </td>

does the trick

[crisp]

of gewoon een minimale breedte zetten op de 1e TD. width werkt bij tables als min-width

[Verwijderd]

Glabbeek schreef op dinsdag 15 maart 2005 @ 21:24:

code:

<td> content1 </td> <td style="text-align: center; width:100%"> x </td>

does the trick

Je zou verwachten dat dat werkt ja, maar de ene cell met "x" wordt dan zo breed als ongeveer de hele breedte van mijn scherm en niet zo breed als de cell met het colspan=2 attribuut

width:100% op de "x" cell of width:1% op de "content1" cell waren ongeveer de eerste dingen die ik probeerde.

[crisp]

mmz, tsja - IE doet het weer eens anders
Ik ben bang dat er niets anders opzit dan tables te gaan nesten of andere elementen te gaan gebruiken en die mbv CSS te positioneren (floats bijvoorbeeld).

[Verwijderd]

crisp schreef op dinsdag 15 maart 2005 @ 21:40:
mmz, tsja - IE doet het weer eens anders
Ik ben bang dat er niets anders opzit dan tables te gaan nesten of andere elementen te gaan gebruiken en die mbv CSS te positioneren (floats bijvoorbeeld).

Hmmm, met de width op het eerste TD gaat het juist fout in firefox. Als ik gebruik:

HTML:

<td style="width: 1px; white-space: nowrap;" > content1 </td>
<td> x </td>

En ik gebruik meerdere van deze colommen naast elkaar, met telkens per 2 colommen in de 2de rij 1 column met colspan="2", dan wordt de ruimte tussen deze paren van colommen enorm groot.

Ik krijg dan bv het volgende te zien:

code:

content1    x   content2    y   content3        z       content4
tekst           tekst           een wat langere tekst   kort

Het vreemde is dus dat de ruimte tussen content1 x en content 2 enorm toeneemt, alleen omdat ik een hele kleine width opgeef.

offtopic:
keuze voor een monospaced font zou wel handig zijn in de code section mbt ascii art

[ Voor 26% gewijzigd door Verwijderd op 15-03-2005 21:53 ]

[crisp]

Tabellen zijn wat dat betreft redelijk onvoorspelbaar tenzij je met fixed table-layout gaat werken of gaat nesten.

[Verwijderd]

crisp schreef op dinsdag 15 maart 2005 @ 21:50:
Tabellen zijn wat dat betreft redelijk onvoorspelbaar tenzij je met fixed table-layout gaat werken of gaat nesten.

Nja, ik probeer nog wel wat met nesten. Mijn content wordt dynamisch gezet in de cellen (en het aantal kolommen is ook dynamisch) omdat het om een server app gaat die de HTML genereerd. Ik ben bang dat een fixed layout dan niet gaat werken.

[Verwijderd]

update:
Nesten werkt opzich wel. Ik heb de 2 colommen van de eerste rij nu in een geneste tabel gezet, zodat de kolommen in de 2de rij nu geen colspan meer gebruiken. Dit werkt redelijk, hoewel het niet echt 'mooi' is.

Alleen is het jammer dat een table altijd een 'bounding box' schijnt te creeeren die ietjes inspringt. Ik kan deze ruimte niet wegkrijgen. Heb margin-left geprobeerd en border-left, padding-left, maar dit werkt allemaal niet.

Iemand hier nog een idee over?

[ Voor 15% gewijzigd door Verwijderd op 15-03-2005 22:16 ]