Заголовок столбца CSS с img – как закрепить img/div справа?

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

Вопрос

У меня есть таблица HTML, которую я использую в качестве заголовков столбцов в виде сетки.Нажатие на заголовок столбца запускает JavaScript, который выполняет сортировку представления сетки, а рядом с текстом столбца отображается значок, показывающий, что столбец отсортирован, как показано ниже:

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

Таблица имеет табличный макет:исправлено, а диапазон текста имеет переполнение:скрыто, переполнение текста:многоточие, пробел:сейчасрап.

Когда текст очень длинный, я получаю желаемый эффект многоточия, но спрайт значка сортировки (div с заданной шириной и фоном) обрезается с правой стороны ячейки таблицы.Есть какие-нибудь предложения, как сделать так, чтобы значок сортировки имел приоритет над пространством над эллиптическим текстом с помощью CSS?Если столбец «отсортирован», я хочу, чтобы сортировка img всегда была там и имела размер эллипса текста вместо текста, выталкивающего img из видимого пространства ячейки:

Это было полезно?

Решение

Я не уверен, какие плавающие объекты вы добавляете к изображению, но пытались ли вы плавать вправо и добавлять правое поле размером около 5 пикселей? Это бы подтолкнуло его внутрь.

Другие советы

Почему бы вам просто не добавить класс sortImgSprite в <span> вместо этого тег?Поскольку вы все равно выполняете сортировку с помощью JavaScript, у вас должен быть дескриптор столбца таблицы?

Когда пользователь сортирует столбец, добавьте класс «sortImgSprite» слева или справа (возможно, добавьте небольшое дополнение, если необходимо) и удалите его, когда этот столбец больше не сортируется.

...или я что-то пропустил?

Ах.Я что-то пропустил.Думал, что переполненный текст находился в строках под заголовками столбцов, а не в самих заголовках.

Хорошо, а что, если вы добавите класс в заголовок таблицы?Твой <th> тег (если это то, что вы используете) может выровнять изображение по правому краю ячейки, а затем ваше <span> тег может наследовать этот класс и добавить другое форматирование (например, переполнение текста и т. д.)?

Опять же, вам может потребоваться отступ справа от диапазона, чтобы фоновое изображение ячейки заголовка таблицы было четко видно за любым текстом.

Спасибо за рекомендации! Вот что я сделал, чтобы получить то, что хотел через 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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top