如何在边框表格单元格的右下方创建垃圾方块？

Question

如何在表格单元的右下角添加一个小方块？

就像在excel中选定的单元格一样。

我试图在单元格中添加一个div，但是，它使内容未放置在单元格的中央。所以，我不知道该怎么办。

HTML：

.borderCell
{
	border:1px inset #e0e0e0;
}
.borderCell:after
{	
	border:2px inset transparent;
}
.dateCell
{
	padding: 0px;
	font-size:17px;
	width:25px;
}

<table>
  <tr>
    <td class="borderCell alignCenter" contenteditable="true">
      b
      <div style="width:5px;height:5px;background-color:blue;float:right"></div>
    </td>
  </tr>
</table>  

Answer 1

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

th,
td {
  padding: 10px;
}

td.parentsqure {
  position: relative;
}

.squre {
  height: 5px;
  width: 5px;
  background: red;
  position: absolute;
  right: 0;
  bottom: 0;
}

<table>
  <tr>
    <td>test 1</td>
    <td class="parentsqure">
      test 2
      <div class="squre"></div>
    </td>
    <td>test 3</td>
  </tr>
</table>

Answer 2

无需考虑额外的元素，请使用简单的背景：

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

th,
td {
  padding: 10px;
}

td.parentsqure {
  background: linear-gradient(red,red) bottom right/5px 5px no-repeat;
}

<table>
  <tr>
    <td>test 1</td>
    <td class="parentsqure">
      test 2
    </td>
    <td>test 3</td>
  </tr>
</table>