Intestazione di colonna CSS con img - come agganciare img / div a destra?

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

Domanda

Ho una tabella HTML che utilizzo come intestazioni di colonna in una vista a griglia. Facendo clic sull'intestazione di una colonna si attiva JavaScript che rende l'ordinamento della vista griglia e un'icona che mostra che la colonna è ordinata viene visualizzata accanto al testo della colonna, simile al seguente: 

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

La tabella ha un layout di tabella: fisso e l'intervallo per il testo ha un overflow: nascosto, un overflow del testo: ellissi, uno spazio bianco: nowrap.

Quando il testo è molto lungo, ottengo l'effetto puntini di sospensione che desidero, ma l'icona di ordinamento sprite (div con larghezza e sfondo impostati) viene ritagliata dal lato destro della cella della tabella. Qualche suggerimento su come assicurarsi che l'icona di ordinamento abbia la precedenza sullo spazio sul testo ellittico tramite CSS? Se una colonna è & Quot; ordinata & Quot ;, Voglio che l'ordin img sia sempre lì e che il testo sia ellittico invece del testo che spinge l'img fuori dallo spazio visibile della cella:

È stato utile?

Soluzione

Non sono sicuro di quali elementi galleggianti stai aggiungendo all'immagine, ma hai provato a fluttuare a destra e aggiungere un margine destro di circa 5 px? Ciò lo spingerebbe dentro.

Altri suggerimenti

Perché non dovresti semplicemente aggiungere il " sortImgSprite " classe al tag <span> invece? Dato che stai comunque eseguendo l'ordinamento tramite JavaScript, devi avere un handle per la colonna della tabella?

Quando l'utente ordina su una colonna, aggiungi " sortImgSprite " classe a sinistra o a destra (eventualmente aggiungere un po 'di riempimento se necessario) e rimuoverlo quando quella colonna non è più ordinata.

... o mi sono perso qualcosa?

Ah. Mi ero perso qualcosa. Pensavo che il testo traboccasse fosse nelle righe sotto le intestazioni delle colonne, non nelle intestazioni stesse.

Ok, quindi se dovessi aggiungere la classe all'intestazione della tabella? Il tuo tag <th> (se è quello che usi) potrebbe allineare l'immagine a destra della cella e quindi il tuo tag <=> potrebbe ereditare quella classe e aggiungere l'altra formattazione (come l'overflow del testo, ecc.)?

Ancora una volta, potresti aver bisogno di un'imbottitura a destra dell'intervallo in modo che l'immagine di sfondo della cella dell'intestazione della tabella sia visibile chiaramente dietro qualsiasi testo.

Grazie per i consigli! Ecco cosa ho finito per ottenere ciò che volevo tramite 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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top