нарисовать стрелку внутри ячейки таблицы с помощью CSS

Некоторые из моих ячеек таблицы имеют очень большое количество контента. Я не хочу отображать их все до тех пор, пока пользователь не наведет на камеру, но я хочу поместить стрелку в угол, чтобы указать, что она может нависнуть - точно так же, как в комментарии excel. Как это сделать с помощью CSS?нарисовать стрелку внутри ячейки таблицы с помощью CSS

an arrow in the corner indicating can be hovered

источник

2013-08-21 Sawyer

Как отображать дополнительный контент на зависания? –

@MrLister Я использую плагин для подсказок, но, честно говоря, я пробовал несколько, но все они не идеальны. Причины 1). дополнительный контент содержит разметки стиля 2). дополнительный контент может быть действительно большим, а инструмент-подсказка позиционируется действительно странно. 3). подсказки инструмента не могут быть выбраны. Я приветствую любые лучшие альтернативы, чем подсказки. – Sawyer

Вы можете использовать атрибут data, если хотите, и отображать его с псевдоэлементом ... Это может быть круто. Я думаю, что у меня есть пример где-то - идет к моим предыдущим ответам ... Редактировать: Найденный - http://stackoverflow.com/a/17819100/1150613 – brbcoding

Использование CSS форм и псевдо-элементы:

HTML

<table> 
    <tr><td class="comment">Foo</td></tr> 
</table>

CSS

* { margin: 0; padding: 0;} 
td { border: 1px solid black; } 
.comment:after { 
    content: ""; 
    position: relative; 
    top: 0.5em; 
    border-left: 0.5em solid transparent; 
    border-top: 0.5em solid red; 
}

DEMO

Обновленный ответ исправить обертывание:

/* add relative positioning to the td */ 
td { border: 1px solid black; position: relative; } 
/* and absolute positioning for the triangle */ 

.comment:after { 
    content: ""; 
    position: absolute; 
    /* left: calc(100% - 0.5em); */ 
    /* use right: 0; instead */ 
    right: 0; 
    top: 0; 
    border-left: 0.5em solid transparent; 
    border-top: 0.5em solid red; 
}

Fixed Demo

источник

2013-08-21 14:29:20 brbcoding

На самом деле у меня возникла небольшая проблема с этим ответом, когда текст обертывается в ячейке, стрелка вместо того, чтобы оставаться в правом верхнем углу ячейки, она появляется в верхняя часть последнего слова. Я переместил стрелку в левый верхний угол в качестве обходного пути. – Sawyer

А, мой плохой --- хороший момент ... Обновлено, чтобы исправить это. – brbcoding

Необходимо заметить, что абсолютное позиционирование в ячейке таблицы с позицией: relative [не работает в Firefox] (https://bugzilla.mozilla.org/show_bug.cgi?id=63895). Так что дополнительная обертка с 'display: block; position: relative' может понадобиться, чтобы сделать это решение кросс-браузером. –

Просто замените 100 с вашей ширины и высоты, а также добавить позицию в нужном месте

.triangle-topright { 
    width: 0; 
    height: 0; 
    border-top: 100px solid red; 
    border-left: 100px solid transparent; 
}

источник

2013-08-21 14:24:00

Вы можете использовать CSS формы и абсолютное позиционирование для достижения этой цели.

Вот скрипку: http://jsfiddle.net/pNmQg/

table td { position: relative; } 
table td span.arrow { 
    position: absolute; 
    top: 0; 
    right: 0; 
    border-top: 5px solid red; 
    border-left: 5px solid transparent; 
}

источник

2013-08-21 14:27:22 tomaroo

Этот тик находится в правом верхнем углу окна, а не ячейке для меня. (FF22, Linux) –

@Cobra_Fast. У вас должно быть 'position: relative' на' td', иначе span перейдет к следующему родительскому объекту, который не является статичным или самим окном. – Shauna

@Shauna Я говорю о связанной скрипке. –

Я нашел другое решение, совместимое для всех браузеров --- испытано.

  .arrow-right-1 { 
 
      position: absolute; 
 
      top: -1px; 
 
      right: -5px; 
 
      float: right; 
 
      width: 0; 
 
      height: 0; 
 
      border-left: 10px solid transparent; 
 
      border-right: 10px solid transparent; 
 
      border-bottom: 10px solid red; 
 
      
 
      transform: rotate(45deg); 
 
      } 
 
      
 
      
 
      
 
      td { 
 
      border: solid 1px blue; 
 
      width: 220px; 
 
      height: 100px; 
 
      /* padding: 0px !important; */ 
 
      /* vertical-align: top; */ 
 
      position: relative; 
 
      }

<table class="table"> 
 

 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <div class="arrow-right-1"></div>you can increase or decrease the size td's width/height or can put more text 
 
     </td> 
 

 
    </tr> 
 

 
    </tbody> 
 
</table>

источник

2016-01-04 14:46:11

нарисовать стрелку внутри ячейки таблицы с помощью CSS

ответ

Смежные вопросы