Bootstrap tr：悬停背景颜色添加小方块

Question

我有一个附有table-hover类的表。

我已将该课程改写为以下内容：

.table-hover > tbody > tr:hover > td {
    background-color: lightblue;
}

表格代码如下：

<div class="row mt10">
    <div class="col-sm-7">
        <div class="position_absolute width100p height300">
            <table class="table table-bordered table-striped table-hover position_absolute height300" ng-if="sheet !== undefined;" style="display:block;">
                <tbody class="height300" style="overflow-y: auto; display: block;">
                    <tr ng-repeat="row in sheet track by $index" class="width100p">
                        <td class="width125 height40 scrollableX" style="white-space: nowrap;" ng-repeat="col in row track by $index">
                        {{ col }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

当鼠标输入<td>时出现问题，因为在<td>的左上方添加了一个小方块。

这样的事情：

你知道这里有什么问题吗？

提前致谢。