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

Question

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

Demandé el 8 de Janvier, 2009: Quand la question a-t-elle été
38938 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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>

Demandé el 8 de Janvier, 2009 par ine

Answer 1

5 Réponses

Answer 2

112voto

DavGarcia Points 9322

Utilisez la propriété CSS white-space : nowrap y overflow : hidden sur votre td.

Mise à jour

Je viens de voir votre commentaire, je ne sais pas à quoi je pensais, j'ai fait cela tellement de fois que j'ai oublié comment je le fais. C'est une approche qui fonctionne bien dans la plupart des navigateurs pour moi... plutôt que d'essayer de contraindre le td, j'utilise un div à l'intérieur du td qui va gérer l'instance de débordement. Cela a l'avantage de pouvoir ajouter vos padding, marges, couleurs de fond, etc. à votre div plutôt que d'essayer de styliser le td.

<html>
<head>
<style>
.hideextra { white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
</style>
</head>
<body>
<table style="width: 300px">
<tr>
    <td>Column 1</td><td>Column 2</td>
</tr>
<tr>
   <td>
    <div class="hideextra" style="width:200px">
        this is the text in column one which wraps</div></td>
   <td>
    <div class="hideextra" style="width:100px">
        this is the column two test</div></td>
</tr>
</table>
</body>
</html>

En prime, IE placera une ellipse dans le cas d'un débordement en utilisant le style text-overflow:ellipsis propre au navigateur. Il existe un moyen de faire la même chose dans FireFox

Mise à jour 2

J'ai commencé à utiliser ce code de troncature par Justin Maxwell depuis plusieurs mois maintenant qui fonctionne correctement dans FireFox aussi.

Répondu el 8 de Janvier, 2009 par DavGarcia (9322 Points )

0 votes

J'ai essayé, en fait. Cela ne fait qu'étaler le tableau, le forçant à rester sur une seule ligne, mais augmentant la largeur du tableau. Je mets à jour la question pour la clarifier.

Commenté el 9 de Janvier, 2009 par ine

0 votes

Je regarde la mise à jour maintenant : Génial ! C'est exactement ce que je voulais.

Commenté el 16 de Janvier, 2009 par ine

0 votes

Encore une autre mise à jour... Firefox prend en charge le débordement de texte depuis la sortie de Firefox 7 fin 2011. Et il prend même en charge les balises expérimentales, ce que les autres navigateurs ne font pas. developer.mozilla.org/en/CSS/text-overflow

Commenté el 13 de Juin, 2012 par DavGarcia

Answer 3

32voto

Triptych Points 70247

Cette astuce consiste à utiliser l'ésotérisme table-layout:fixed règle

Ce CSS devrait fonctionner par rapport à votre échantillon HTML :

table {table-layout:fixed}
td {overflow:hidden; white-space:nowrap}

Vous devez également spécifier des largeurs de colonnes explicites pour les éléments suivants <td> s.

El table-layout:fixed dit "La largeur des cellules de ce tableau dépend de ce que je dis, et non du contenu réel des cellules". Cette règle est normalement utile car le navigateur peut commencer à afficher le tableau après avoir reçu le premier <tr> . Sinon, le navigateur doit recevoir le tableau entier avant de pouvoir calculer la largeur des colonnes.

Répondu el 9 de Janvier, 2009 par Triptych (70247 Points )

Answer 4

11voto

cletus Points 276888

Essayez :

td, th {
  white-space: nowrap;
  overflow: hidden;
}

Répondu el 8 de Janvier, 2009 par cletus (276888 Points )

Answer 5

8voto

Anjyr Points 1433

A chaque fois que vous avez besoin de texte en une seule ligne, mettez ce code

white-space:nowrap

Répondu el 10 de Septembre, 2020 par Anjyr (1433 Points )

Answer 6

2voto

Utilisateur non enregistré Points 0

Pour ceux qui sont intéressés :

Cellules de tableau dynamique existantes : ## Texte long sans espace, par exemple des adresses e-mail ##

Il semble qu'une réplication complète de l'utilisation par MS (et d'autres) de l'outil de gestion de l'image de marque soit possible. text-overflow:ellipsis ne peut pas être dupliquée dans FireFox jusqu'à l'ajout de l'annexe interne … à du texte coupé est concerné ; surtout sans javascript qui est souvent désactivé par les utilisateurs de nos jours.

Toutes les idées que j'ai trouvées pour m'aider n'ont pas réussi à résoudre le problème du redimensionnement dynamique et du texte long sans espace.

Cependant, j'avais besoin d'un découpage dans un tableau de largeur dynamique dans l'un de mes programmes d'administration Windows. Ainsi, avec un peu de bricolage, une réponse acceptable pour tous les navigateurs peut être obtenue à partir des échantillons fournis sur "MSDN".

c'est-à-dire

<table width="20%" border="1" STYLE="position: absolute; top: 100;">
<tr>

<td width="100%"><DIV STYLE="position: relative; height: 14px; top: 0px; width:100%;">
<DIV STYLE="position: absolute; left: 0px; top: 0px; color: black; width: 100%; height: 14px;
    font: 12px Verdana, Arial, Geneva, sans-serif; overflow: hidden; text-overflow:ellipsis;">
<NOBR>fasfasfasfasfsfsffsdafffsafsfsfsfsfasfsfsfsafsfsfsfWe hold these truths to be self-evident, that all people are created equal.</NOBR></DIV>
</DIV>

</td>
</tr>
</table>

Le seul petit défaut est que les utilisateurs de Firefox ne voient pas la partie " ", ce qui est un détail qui ne me dérange pas vraiment à ce stade.

Les futurs FF devraient, espérons-le, se résoudre de manière gracieuse si l'on met en œuvre cette option utile très importante. Maintenant, je n'ai plus besoin de réécrire en utilisant un contenu futuriste sans tableau moins favorable (ne discutez pas, il y a beaucoup de sites web cassés à cause de cela ces jours-ci).

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

J'espère que ça aidera certains corps.

Répondu el 19 de Juin, 2009 par Utilisateur non enregistré (0 Points )

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

Réponses

Mise à jour

Mise à jour 2

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Mise à jour

Mise à jour 2

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: