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

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

2 голосов
/ 22 января 2009

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 22 января 2009

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

0 голосов
/ 23 января 2009

Спасибо за рекомендации! Вот что я в итоге сделал, чтобы получить то, что хотел через 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>
0 голосов
/ 22 января 2009

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

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...