Positioning a triangle (arrow) element left to text within <td> inside a table using CSS & HTML

Question

Working on recreating this table, I'm trying to recreate the triangle position in the first row:

This part in HTML:

<table>
    (...)
    <tr>
        <td><div id="arrowUp"></div>Norrk&ouml;ping</td>

Arrow code:

#arrowUp {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    border-color: transparent transparent #0dff00 transparent;
}

I'm at a loss as how to position this. Tried changing position property but it seems to break the table, margins stretch the row. It should have something to do with display and position but I'm at a loss with the possibilities and going nowhere blind.

Answer 1

▶ 1 ^st Option :

You can achieve this by setting position: absolute on the #arrowUp element. Then, you can just play with top and left to position the arrow exactly where you want.

jsFiddle: → here .

Snippet:

 td { position: relative; padding-left: 20px; } .arrowUp, .arrowDown { content: ""; border-style: solid; border-width: 5px 5px; position: absolute; left: 8.5%; transform: translate(-50%, -50%); } .arrowUp { border-color: transparent transparent #0dff00 transparent; top: 37%; } .arrowDown { border-color: #ff0000 transparent transparent transparent; top: 60%; } 

 <table> <tr><td><div class = "arrowUp"></div>Norrk&ouml;ping</td></tr> <tr><td><div class = "arrowDown"></div>AIK</td></tr> </table> 

---

▶ 2 ^nd Option :

While still using the properties mentioned in the 1 ^st option, you can get rid of your div#arrowUp element by setting <td class = "arrowUp">Norrk&ouml;ping</td> and using the :before pseudo element. This way you'll use less code while achieving the same result.

jsFiddle: → here .

Snippet:

 .arrowUp, .arrowDown { position: relative; padding-left: 20px; } .arrowUp:before, .arrowDown:before { content: ""; border-style: solid; border-width: 5px 5px; position: absolute; left: 8.5%; transform: translate(-50%, -50%); } .arrowUp:before { border-color: transparent transparent #0dff00 transparent; top: 37%; } .arrowDown:before { border-color: #ff0000 transparent transparent transparent; top: 60%; } 

 <table> <tr><td class="arrowUp">Norrk&ouml;ping</td></tr> <tr><td class="arrowDown">AIK</td></tr> </table> 

Answer 2

You can use position: absolute

 td { position: relative; padding-left: 15px; } #arrowUp { position: absolute; top: 3px; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 5px 10px 5px; border-color: transparent transparent #0dff00 transparent; } 

 <table> <tr> <td> <div id="arrowUp"></div>Norrk&ouml;ping</td> </tr> </table> 

You can solve this without the div , using a pseudo element

 td { position: relative; padding-left: 15px; } td.arrowUp:after { content: ''; position: absolute; top: 3px; left: 0; width: 0; height: 0; border-style: solid; border-width: 0 5px 10px 5px; border-color: transparent transparent #0dff00 transparent; } 

 <table> <tr> <td class="arrowUp"> Norrk&ouml;ping</td> </tr> </table> 

Or any of the HTML entity arrows

 td { position: relative; padding-left: 15px; } td.arrowUp:before { content: '⇧'; position: absolute; color: lime; left: 0; font-weight: bold; } 

 <table> <tr> <td class="arrowUp"> Norrk&ouml;ping</td> </tr> </table> 

Side note: I recommend using a pseudo element instead of an extra element