J'ai un tableau HTML qui ressemble à ceci :
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
|one which wraps |two test |
-------------------------------------------------
Mais je veux qu'il cache le débordement. La raison en est que le texte contient un lien vers plus de détails, et que le "débordement" gaspille beaucoup d'espace dans ma mise en page. Cela devrait ressembler à ceci (sans augmenter la largeur des colonnes ou du tableau, car ils sortiraient de l'écran/créeraient une barre de défilement horizontale sinon) :
-------------------------------------------------
|Column 1 |Column 2 |
-------------------------------------------------
|this is the text in column |this is the column |
-------------------------------------------------
J'ai essayé de nombreuses techniques CSS différentes pour y parvenir, mais je n'arrive pas à obtenir un résultat correct. Mootables est la seule chose que j'ai trouvée qui permette d'obtenir ce résultat : http://joomlicious.com/mootable/ mais je n'arrive pas à comprendre comment ils font. Quelqu'un sait-il comment je peux faire cela avec mon propre tableau en utilisant CSS et/ou Javascript, ou comment Mootables le fait ?
Exemple de HTML :
<html><body>
<table width="300px">
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>this is the text in column one which wraps</td>
<td>this is the column two test</td>
</tr>
</table></body></html>