如何在td标记元素的顶部放置功能区

Question

我有桌子，我想在<td>标签

的顶部放置简单的彩色色带

表格示例

然后如何在<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 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>

Answer 2

使用: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。

Answer 3

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基于使用伪元素来创建功能区，但您也可以为伪元素提供具有适当高度/宽度的背景图像。