Как разместить ленту поверх тд элемента тега

Question

У меня есть таблица, и я хотел бы поставить простую цветную ленту поверх <td> тега

Пример таблицы

Как тогда добавить ленту в верхней части cornert <td> тега

Это звучит хорошая идея помогает определить точные членов, чем другой так что любая помощь, как я могу добавить такой вид ленты на вершине <td>

HTML

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

Как же мы добавим ленту на name1 <td> тег

~ Благодаря

Answer 1

Вы можете указать CSS класс для элементов, которые нуждаются в ленте, а затем определить фоновое изображение для этого класса:

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

Answer 2

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); 
} 

Мой CSS основан на использовании псевдоэлемента для создания ленты, но вы также можете дать псевдоэлементу фоновое изображение с соответствующей высотой/шириной.

Answer 3

Используйте :first-child селектор, и фоновое изображение.

HTML-:

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

CSS-, используя :first-child селектор:

table { width:100%; } 

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

fiddle.