cabeçalho da coluna CSS com img - como encaixar img / div à direita?

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

Pergunta

Eu tenho uma tabela HTML que eu uso como cabeçalhos de coluna para uma exibição de grade. Ao clicar em uma coluna de cabeçalho gatilhos javascript que faz a exibição de grade tipo, e um ícone mostrando que a coluna é classificada aparece ao lado do texto da coluna, semelhante ao abaixo: 

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

A tabela tem table-layout: fixed, eo intervalo de texto tem overflow: hidden, text-overflow: reticências, white-space:. Nowrap

Quando o texto é muito longo, eu faço obter o efeito reticências que eu quero, mas o sprite ícone de ordenação (div com largura e conjunto de fundo) fica cortado do lado direito da célula da tabela. Todas as sugestões como certificar-se o ícone de ordenação fica precedência para o espaço sobre o texto ellipsizing via CSS? Se uma coluna é "ordenada", eu quero o img espécie para sempre estar lá e ter o texto ellipsize em vez do texto empurrando o img fora do espaço visível da célula:

Foi útil?

Solução

Eu não tenho certeza o que flutua você está adicionando à imagem, mas você já tentou flutuante para a direita e adicionando uma margem direita de cerca de 5 px? Isso iria empurrá-lo para dentro.

Outras dicas

Por que não basta adicionar a classe "sortImgSprite" à tag <span> em vez disso? Desde que você está fazendo a triagem através de JavaScript de qualquer maneira, você deve ter um identificador para a coluna da tabela?

Quando os tipos de usuário em uma coluna, adicione a classe "sortImgSprite" à esquerda ou à direita (talvez adicionar um pouco de preenchimento se necessário) e removê-lo quando a coluna não está classificada.

... ou eu perdi alguma coisa?

Ah. Eu tinha perdido alguma coisa. Pensei que o texto que estava transbordando estava em linhas abaixo os cabeçalhos das colunas, e não nos próprios cabeçalhos.

Ok, então o que se você fosse adicionar a classe para o cabeçalho da tabela? Seu tag <th> (se é isso que você usa) poderia ter a imagem alinhado à direita da célula e, em seguida, seu tag <span> poderia herdar essa classe e adicione a outra formatação (como o texto de estouro, etc)?

Mais uma vez, você pode precisar de preenchimento no lado direito do seu tempo de modo que imagem de fundo da célula do cabeçalho da tabela pode ser visto claramente por trás de qualquer texto.

Obrigado pelas recomendações! Aqui está o que eu acabei fazendo para conseguir o que queria 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>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top