html - 在不干扰单元格内容的情况下将文本添加到 HTML 表格单元格的 Angular

Question

如何在不干扰单元格现有文本内容的情况下在表格单元格的右上角添加文本？​​

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

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

看起来像这样:

如何在单元格的右上角添加一个简短的(一个或两个单词)“标签”，使表格看起来像这样？

Answer 1

使用伪元素添加到td

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

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

fiddle : https://jsfiddle.net/cLpshjk9/9/

编辑:评论更新。