How to place ribbon on top of td tag element

Question

I have table and i would like to place simple colored ribbon on top of <td> tag

Example of the table

enter image description here

How then to add ribbon at the top cornert of <td> tag

enter image description here

It sounds good idea helps to identify exact members than the other so any help how i can add such kind of ribbon on top of <td>

HTML

<table border="1">
<tr>
<td>Name1</td>
<td>Email1</td>
</tr>
<tr>
<td>Name2</td>
<td>Email2</td>
</tr>
</table>

How then we add ribbon on Name1 <td> tag

~ Thanks

You're not going to include any of your markup? – DevlshOne Nov 17 '13 at 18:07 — DevlshOne, Nov 17 '13 at 18:07

score 2 · Answer 1 · answered Nov 17 '13 at 18:13

Live demo here (click).

td:first-child:before {
  content: '';
  width: 30px;
  height: 5px;
  background: red;
  display: block;
  position: relative;
  left: -10px;
  top: -5px;

  transform:rotate(-9deg);
  -ms-transform:rotate(-9deg);
  -webkit-transform:rotate(-9deg);
}

My CSS is based around using a pseudo element to create the ribbon, but you could also give the pseudo element a background image with the appropriate height/width.

score 2 · Accepted Answer · answered Nov 17 '13 at 18:14

2

You can specify a CSS CLASS for the cells that need a ribbon, then define a background image for that class:

<style>
    .ribbon {
        /* remember that image url is relative to where the stylesheet or style tag is located at */
        /* if this style were defined at /Style/site.css, then you would need a url indicating a previous directory like: ../Images/ribbon.png */
        background-image: url('/Images/ribbon.png');
    }
</style>
<table>
    <tr>
        <td class="ribbon">Cell 1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td class="ribbon">Cell 2</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td class="ribbon">Cell 3</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>

answered Nov 17 '13 at 18:14

laylarenee

3,276
7
32
40

1

In this case, it really makes a lot more sense to use `td:first-child` as in my example. – m59 Nov 17 '13 at 18:17
@m59 It should be noted though, for both our answers, that the `:first-child` selector can be buggy in IE8 and below. Check the SO Answer [here](http://stackoverflow.com/questions/7938521/browser-support-for-css-first-child-and-last-child). – Matthew Johnson Nov 17 '13 at 18:22
1

@MatthewJohnson It's worth noting that IE SUXXX. =D – m59 Nov 17 '13 at 18:24
LOL, very much so. Daily headaches from it! +1 for the observation though :) – Matthew Johnson Nov 17 '13 at 18:26
m59, I also agree that first-child selector could be a better choice, but css implementations are subjective. I intentionally provided the most basic example to introduce the concept of css classes, because I was not sure of the OPs experience level with css. – laylarenee Nov 17 '13 at 18:59

score 2 · Answer 3 · answered Nov 17 '13 at 18:17

Use the :first-child selector, and a background image.

The HTML:

<table>
  <tr>
    <td>1</td><td>2</td>
  </tr>
  <tr>
    <td>1</td><td>2</td>
  </tr>
</table>

The CSS, using :first-child selector:

table { width:100%; }

td:first-child {
  padding:10px;
  width:50%;
  background-image:url("http://placehold.it/10x10");
  background-repeat:no-repeat;
}

The fiddle.

How to place ribbon on top of td tag element

3 Answers3