1 regel per cel en toch een resizable tabel

[Verwijderd]

Ik heb een probleem met mijn tabellen,

Ik wil met css of met wat dan ook een tabel maken die resizable is. Maar er mag maar 1 regel text per cel aanwezig zijn. de rest mag niet op de volgende regel doorlopen. Dit mag gewoon worden afgekapt.

ik heb al van alles geprobeerd.
met:
nowrap binnen een cell ,
white-space:nowrap als style binnen cel,
en fixed width als style voor tabel, maar dan is deze niet resizable

Ik zal het verduidelijken aan de hand van wat plaatjes:

dit gebeurd er normaal bij een tabel zonder formatting:

tabel = 100%, eerste cel= 33%, 2e cel = 67%

Dit is de tabel die ik zou willen:

tabel = 100%, eerste cel= 33%, 2e cel = 67%

En waar ik nu naar toe wil is een tabel die niet gefixeerd is op de breedte maar dat je die dus kunt resizen en dat er toch 1 regel blijft. Dus plaatje #2 wordt dan:

(klikbaar voor de oorspronkelijke layout verpest versie)
en ook hier weer:tabel = 100%, eerste cel= 33%, 2e cel = 67%

Kan iemand mij helpen bij dit probleem, google en gotsearch boden geen oplossingen.

[kleautviool]

Denk dat je hiervoor met javascript aan de slag zult moeten. Ik denk iets van kijken wat de breedte van een cel is, en a.d.h. hiervan kijken hoelang te textstring mag zijn.

[disjfa]

kleautviool schreef op 28 januari 2004 @ 13:27:
Denk dat je hiervoor met javascript aan de slag zult moeten. Ik denk iets van kijken wat de breedte van een cel is, en a.d.h. hiervan kijken hoelang te textstring mag zijn.

nee.....

de td`s blocklevel maken en dan een breedte opgeven en een overflow hidden opgeven. verder een float:left erbij zodat de td`s weer nsst elkaar staan en dan doet hij het

wat ook kan is divjes gebruiken is makkelijker, overzichtelijker en sneller

[Verwijderd]

Een combinatie van width, table-layout:fixed; en overflow:hidden; zou moeten werken (in IE6, de enige die table-layout ondersteund AFAIK), de bovenstaande oplossing is iets meer cross-browser :-)

[Verwijderd]

disjfa,

Ik geprobeerd te doen wat jij zei:

HTML:

<table width="100%">
  <tr>
    <td style="height: 0px; background: red; border: none; overflow:hidden; display:block; width:10%; white-space:nowrap">
      hallo ik ben testje
    </td>
    <td style="width:90%">
rest
    </td>
  </tr>
</table>

Maar als ik mijn browser window verklein dan komen er toch een 2e regel en dit is niet de bedoeling. Dus het met de tabel oplossen is geen oplossing

gelukkig werkt het volgende wel, met een div:

HTML:

<table width="100%">
  <tr>
   <td style="height: 0px; background: red; border: none; overflow:hidden; display:block; width:50%">
      <div style="width:20%; height:1; display:block; overflow:hidden; white-space:nowrap" >
hallo ik ben testje
      </div>
    </td>
    <td style="width:50%">
     rest
    </td>
  </tr>
</table>

bedankt voor je hulp!

[Verwijderd]

height:1; ? Welke browser ondersteund dit van CSS3? Zet er een _eenheid_ achter a.u.b.