CODEWITHSUNDEEP
htmlcssribbon
Reham Fahmy
Reham Fahmy

Reputation: 5063

How to place ribbon on top of td tag element

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

Upvotes: 2

Views: 1363

Answers (3)

Matthew Johnson
Matthew Johnson

Reputation: 5155

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.

Upvotes: 2

laylarenee
laylarenee

Reputation: 3284

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>

Upvotes: 2

m59
m59

Reputation: 43755

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.

Upvotes: 2

Related Questions