En-tête de colonne CSS avec img - Comment ancrer img / div à droite?
-
19-08-2019 - |
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:
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>