79 votes

CSS/Javascript pour forcer la ligne du tableau html sur une seule ligne

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>

1voto

splintor Points 2119

Comme l'a dit cletus, vous devriez utiliser white-space: nowrap pour éviter le retour à la ligne, et overflow:hidden pour masquer le débordement. Cependant, pour qu'un texte soit considéré comme un débordement, vous devez définir la largeur de td/th. Ainsi, si le texte nécessite plus que la largeur spécifiée, il sera considéré comme un débordement et sera masqué.

De plus, si vous donnez un exemple de page Web, les répondants peuvent fournir une page mise à jour avec la correction que vous souhaitez.

0voto

Jobo Points 934

Si vous masquez le débordement et qu'il y a un long mot, vous risquez de perdre ce mot. Vous pouvez donc aller plus loin et utiliser l'attribut css "word-wrap".

http://msdn.microsoft.com/en-us/library/ms531186(VS.85).aspx

0 votes

Intéressant, mais je ne me soucie pas vraiment de perdre le mot. Je suis juste intéressé à fournir un aperçu.

0voto

Ben Points 10335

Je me demande s'il ne serait pas utile d'utiliser PHP (ou un autre langage de script côté serveur) ou Javascript pour tronquer les chaînes à la bonne longueur (bien que le calcul de la bonne longueur soit délicat, à moins d'utiliser une police à largeur fixe) ?

0voto

Utilisez position:absolute ; et width:xxx% ; sur le td-Element.

-1voto

John_ Points 1842

Si vous ne voulez pas que le texte s'enroule et que la taille de la colonne s'agrandisse, définissez une largeur et une hauteur pour la colonne et définissez "overflow : hidden" dans votre feuille de style.

Pour faire cela sur une seule colonne, vous devrez ajouter une classe à cette colonne sur chaque ligne. Sinon, vous pouvez le faire sur toutes les colonnes, c'est vous qui voyez.

Html :

<table width="300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td class="column-1">this is the text in column one which wraps</td>
   <td>this is the column two test</td>
</tr>
</table>

feuille de style :

.column-1
{
  overflow: hidden;
  width: 150px;
  height: 1.2ex; 
}

Par exemple, la taille relative de la police pour la hauteur est une unité. Si vous utilisez des pixels pour définir la taille de la police, vous pouvez l'utiliser à la place.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X