CODEWITHSUNDEEP
csshtml-table
Sawyer
Sawyer

Reputation: 15917

draw an arrow inside table cell using CSS

Some of my table cells have really large amounts of content. I don't want to display all of them until the user hovers on the cell, but I want to put a arrow in the corner to indicate it can be hovered - just like in the excel comment. How can I do this using CSS?

an arrow in the corner indicating can be hovered

Upvotes: 5

Views: 6148

Answers (4)

Rajan Kumar
Rajan Kumar

Reputation: 63

I found another solution compatible for all browsers --- Tested. 

          .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>

Upvotes: 0

brbcoding
brbcoding

Reputation: 13586

Using CSS Shapes and pseudo-elements:

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

Updated answer to fix wrapping:

/* 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

Upvotes: 10

Yulia Puchnina
Yulia Puchnina

Reputation: 11

Just replace 100 with your width and height, and add a position in a right place

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

Upvotes: 1

tomaroo
tomaroo

Reputation: 2534

You can use CSS shapes and absolute positioning to accomplish this.

Here's a fiddle: 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;
}

Upvotes: 2

Related Questions