将文本添加到HTML表格单元格的角落，而不会干扰单元格内容

Question

如何在表格单元格的右上角添加文字而不会干扰单元格的现有文本内容？

例如，我有一个简单的HTML表：

<table>
<tr>
  <td>Abc</td>
  <td>Defg</td>
</tr>
<tr>
  <td>Hijkl</td>
  <td>Mno</td>
</tr>
</table>

看起来像这样：

如何在单元格的右上角添加一个短（一个或两个单词）“标签”，使表格如下所示？

Answer 1

在div中放置一个div，使其相对位置。将该标签添加为span / div或任何元素，使其成为top: 0, right: 0

的绝对值

Answer 2

使用伪元素添加到td

＆＃13;

＆＃13;

td {
  position: relative;
  width: 200px;
  height: 200px;
  background: yellow;
}

td.one::after {
  content: 'stuff here';
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}

td.two::after {
  content: 'different stuff';
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}


td::after {
  content: attr(data-tag);
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
}

＆＃13;

<table>
  <tr>
    <td>jaflkasdjf ajl;fjasd;lfja ;lfj a;ljf a jaljfdlajflaj</td>
    <td class="one">lajflajd ajlfkkjd flaj jla jkfa</td>
  </tr>
  <tr>
    <td class="two">jaflkasdjf ajl;fjas</td>
    <td>lajflajd ajlfkkjd flaj jla jkfa</td>
  </tr>
</table>


<table>
  <tr>
    <td>jaflkasdjf ajl;fjasd;lfja ;lfj a;ljf a jaljfdlajflaj</td>
    <td data-tag="this is text">lajflajd ajlfkkjd flaj jla jkfa</td>
  </tr>
  <tr>
    <td data-tag="this is different">jaflkasdjf ajl;fjas</td>
    <td>lajflajd ajlfkkjd flaj jla jkfa</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

小提琴： https://jsfiddle.net/cLpshjk9/9/

编辑：更新评论。

Answer 3

<table>
<tr>
  <td>Abc</td>
  <td>Defg<span> some label </span></td>
</tr>
<tr>
  <td>Hijkl</td>
  <td>Defg<span> some label </span></td>
</tr>
</table>

table {
  border:1px solid black;
}

td {
  width: 200px;
  height: 50px;
  border:1px solid gray;
  position: relative; 
}

td span {
  position: absolute; 
  right: 0;
  top: 0;
  background: gray;
}

小提琴：https://jsfiddle.net/ykor79mL/

Answer 4

Use Following code :


<table>
    <tr>
    <td>Table Data come here
        <div class="topright">Next Code</div>
    </td>
    </tr>
</table>

<style type="text/css">
td {
  position: relative;
  width: 200px;
  height: 200px;
  background: yellow;
}

td .topright { 
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}
</style>