Encabezado de columna CSS con img: ¿cómo acoplar img / div a la derecha?

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

Pregunta

Tengo una tabla HTML que uso como encabezados de columna para una vista de cuadrícula. Al hacer clic en el encabezado de una columna, se activa JavaScript que hace que la vista de cuadrícula se clasifique, y un icono que muestra que la columna está ordenada aparece junto al texto de la columna, similar al siguiente: 

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

La tabla tiene un diseño de tabla: fijo, y el espacio para texto tiene desbordamiento: oculto, desbordamiento de texto: puntos suspensivos, espacio en blanco: nowrap.

Cuando el texto es muy largo, obtengo el efecto de puntos suspensivos que quiero, pero el sprite del icono de ordenación (div con ancho y fondo establecido) se recorta del lado derecho de la celda de la tabla. ¿Alguna sugerencia sobre cómo asegurarse de que el ícono de ordenación tenga prioridad para el espacio sobre el texto de elipsis a través de CSS? Si una columna es & Quot; ordenada & Quot ;, quiero que la ordenación img siempre esté ahí y que el texto se elipsice en lugar de que el texto empuje la imagen fuera del espacio visible de la celda:

¿Fue útil?

Solución

No estoy seguro de qué flotadores está agregando a la imagen, pero ¿ha intentado flotar a la derecha y agregar un margen derecho de aproximadamente 5 px? Eso lo empujaría hacia adentro.

Otros consejos

¿Por qué no agregarías " sortImgSprite " clase a la etiqueta <span> en su lugar? Como de todos modos está ordenando a través de JavaScript, ¿debe tener un identificador para la columna de la tabla?

Cuando el usuario ordena en una columna, agregue " sortImgSprite " clase a la izquierda o derecha (tal vez agregue un poco de relleno si es necesario) y elimínelo cuando esa columna ya no esté ordenada.

... ¿o me he perdido algo?

Ah. Me había perdido algo. Pensé que el texto que se desbordaba estaba en filas debajo de los encabezados de las columnas, no en los encabezados mismos.

Ok, ¿y qué pasaría si agregaras la clase al encabezado de la tabla? ¿Su etiqueta <th> (si eso es lo que usa) podría tener la imagen alineada a la derecha de la celda y luego su etiqueta <=> podría heredar esa clase y agregar el otro formato (como el desbordamiento de texto, etc.)?

Nuevamente, es posible que necesite relleno a la derecha de su espacio para que la imagen de fondo de la celda del encabezado de la tabla se pueda ver claramente detrás de cualquier texto.

¡Gracias por las recomendaciones! Esto es lo que terminé haciendo para obtener lo que quería a través de 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top