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

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

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

Таблица имеет table-layout: fixed, а диапазон для текста имеет overflow: hidden, text-overflow: ellipsis, white-space: nowrap.

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


css html-table ellipsis dock cell
person sunflowerpower    schedule 22.01.2009    source источник

Ответы (3)


arrow_upward
2
arrow_downward

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

person jerebear    schedule 22.01.2009
comment
Обязательно установите для ‹span› padding-right: равный ширине изображения, плюс любое поле, которое вы хотите, чтобы изображение имело (левое и правое). - person Ben Blank; 22.01.2009

arrow_upward
0
arrow_downward

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

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

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

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

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

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

person Phil.Wheeler    schedule 22.01.2009
comment
В этом случае его могут проглотить, если строка была преобразована браузером в ... (потому что она слишком длинная). - person strager; 22.01.2009

arrow_upward
0
arrow_downward

Спасибо за рекомендации! Вот что я в итоге сделал, чтобы получить то, что хотел, с помощью 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>
person sunflowerpower    schedule 23.01.2009