[HTML] Hoe tabelcel inhoud aan tabelbreedte laten aanpassen?

[Reveller]

Als ik de inbox van Gmail bekijk, worden mijn emailtjes in wat lijkt een tabel weergegeven. Elke regel in die tabel ziet er als volgt uit:

code:

+-------------------+-----------------------------------------------+-------+
|email adres zender | email subject - eerste woorden van email body | datum |
+-------------------+-----------------------------------------------+-------+

Als ik mijn browservenster vergroot of verklein, schaalt de middelste cel mee. Bijzonder is dat de inhoud van die cel niet op de server al wordt afgebroken (bijvoorbeeld na 100 karakters), maar dat de tekst in die cel doorloopt tot aan het einde van de cel. Als ik dus mijn browserscherm verklein, gebeurt er met bovenstaande tabelrij het volgende:

code:

+-------------------+-----------------------------------+-------+
|email adres zender | email subject - eerste woorden van| datum |
+-------------------+-----------------------------------+-------+

Zie dat de inhoud van de middelste cel nu eindigt bij "van" in plaats van "body" zoals hierboven. De celinhoud wordt dus niet gewrapped. Het lijkt wel of de datum cel "over" de middelste cel heen schuift. In het echt ziet het er zo uit (let op de rode kaders):



En nu met een verkleind venster:



Mijn vraag is: hoe doet Google dit? Ik kan niet in de source kijken, want deze is (terecht ) geobscured. Is dit eigenlijk wel een HTML tabel of zijn het allemaal losse divjes? Of hebben ze een div in de middelste tabelcel geplaatst? En wat zijn dan de properties van die div of td?

[ Voor 29% gewijzigd door Reveller op 29-12-2006 12:15 ]

[DelTorro]

Dit komt volgens mij simpelweg omdat er gebruik wordt gemaakt van frames, en geen tabellen (althans, dat gedeelte dat jij bedoelt volgens mij)

[Reveller]

Nee, er worden geen frames gebruikt. Nadat ik de "source chart" van Gmail heb bekeken (via Firefox plugin die de gerenderde pagina tekent in blokken), en de css van gmail heb gedownload, zag ik de "text-overflow" property. Deze kende ik niet, dus via Google kwam ik uit op http://www.blakems.com/archives/000077.html, welke deze property bespreekt (toevallig genoeg aan de hand van de Gmail inbox!). Echter, text-overflow is IE only, maar Gmail gedraagt zich bij mij gelijk in IE en FF. Verder dan dit kwam ik niet. Nogmaals, de Gmail source is erg lastig te lezen. Heeft iemand een idee?

[crisp]

Vrij simpel:

HTML:

<table border=1 style="table-layout:fixed;width:100%">
    <tr>
        <td style="width:100px">foo
        <td style="white-space: nowrap; overflow: hidden">Een lange tekst Een lange tekst Een lange tekst Een lange tekst Een lange tekst Een lange tekst Een lange tekst
        <td style="width:120px">12-10-2006
</table>

(inline styles gebruikt voor eenvoud)

[Reveller]

Crisp, dank je! Bij mij ging het fout omdat ik geen "table-layout:fixed;" in de tabel tag had staan