En-tête de colonne CSS avec img - Comment ancrer img / div à droite?

StackOverflow https://stackoverflow.com/questions/467603

Question

J'ai un tableau HTML que j'utilise comme en-tête de colonne dans une vue en grille. Si vous cliquez sur un en-tête de colonne, javascript se déclenche, ce qui permet de trier la vue en grille. Une icône indiquant que la colonne est triée apparaît à côté du texte de la colonne, comme ci-dessous: 

|---------------------------------------------------------------------------------|
| <span> Column 1 </span> <div class="sortImgSprite" /> | <span> Column 2 </span> |
|---------------------------------------------------------------------------------|

La table a disposition-tableau: corrigée, et la portée du texte a un débordement: masqué, débordement de texte: points de suspension, espace-blanc: maintenant.

Lorsque le texte est très long, j'obtiens l'effet des points de suspension que je veux, mais l'icône de tri sprite (div avec la largeur et l'arrière-plan définis) est coupée du côté droit de la cellule du tableau. Des suggestions pour vous assurer que l’icône de tri a la priorité sur l’espace par rapport au texte en ellipsage via CSS? Si une colonne est & "Triée &", Je veux que le tri img soit toujours présent et que le texte soit ellipsize au lieu du texte repoussant l’img hors de l’espace visible de la cellule:

Était-ce utile?

La solution

Je ne suis pas sûr de ce que les flottants que vous ajoutez à l'image, mais avez-vous essayé de flotter à droite et d'ajouter une marge droite d'environ 5 px? Cela le pousserait à l'intérieur.

Autres conseils

Pourquoi ne pas simplement ajouter le & "sortImgSprite &"; classe à la balise <span> à la place? Comme vous faites quand même le tri via JavaScript, vous devez avoir un identifiant dans la colonne de la table?

Lorsque l'utilisateur trie sur une colonne, ajoutez le " sortImgSprite " classe à gauche ou à droite (peut-être ajouter un peu de remplissage si nécessaire) et la supprimer lorsque cette colonne n'est plus triée.

... ou ai-je oublié quelque chose?

Ah. J'avais raté quelque chose. Je pensais que le texte qui débordait était rangé sous les en-têtes de colonnes, pas dans les en-têtes eux-mêmes.

Ok, alors si vous deviez ajouter la classe à l'en-tête de la table? Votre balise <th> (si c'est ce que vous utilisez) pourrait avoir l'image alignée à droite de la cellule, puis votre balise <=> pourrait hériter de cette classe et ajouter l'autre mise en forme (telle que le débordement de texte, etc.)?

Là encore, vous aurez peut-être besoin d'un bourrage à droite de votre étendue pour que l'image d'arrière-plan de la cellule d'en-tête de tableau apparaisse clairement derrière tout texte.

Merci pour les recommandations! Voici ce que j'ai fini par faire pour obtenir ce que je voulais via CSS: 

<html>
<head>
<style type="text/css">
table
{
   table-layout:fixed;
   width: 300px;
}

div.foo
{
   float:right;
   width:25px;
   height:1.2em;
   background-color:green;
}

.bar
{
   margin-right:30px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}
</style>
</head>

<body>
<table border="1">
   <tr>
      <td>
         <div class="foo"></div>
         <div class="bar" title="This is some text. This is some text. This is some text. This is some text.">This is some text. This is some text. This is some text.</div>
      </td>
   </tr>
</table>
</body>  
</html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top