空时如何突出显示表格单元格边框?

我使用AngularJS创建动态行和列。然后在“保存”按钮上,当任何单元格中没有数据时,单击以突出显示该单元格。

下面是我演示的JSFiddle: http://jsfiddle.net/jyshdf85/

我的表代码如下:

<table class="table table-bordered" ng-form="targetTableForm" ng-class="{submitted: targetTableSubmitted}">
      <colgroup>
        <col class="unique-id">
      </colgroup>
      <thead>
        <tr>
          <th class="unique-id">Name #</th>
          <th contenteditable="true" ng-repeat="c in targetTable.columns" ng-model="c.label"></th>
          <!--<th class="view-next-set"><a href="#">...</a></th>-->
          <td class="center add-column"><a href ng-click="open()">+ Add Column</a></td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="r in targetTable.rows">
          <td contenteditable="true"></td>
          <td contenteditable="true" ng-repeat="column in targetTable.columns" ng-model="r[column.id]" ng-blur="!r.id? addNewRow(r[column.id], r): undefined" ng-required="!$parent.$last"></td>
          <!--<td class="blank" colspan="2"></td>-->
        </tr>
      </tbody>
    </table>

我的CSS是:

.table.submitted td.ng-invalid {
  border-color: red;
}

其工作原理是:

通过单击Add column添加几列,然后键入新添加列的表单元格,它将自动创建一个新行。创建两行。然后从表格单元格中删除这些值。现在,当您按下Save按钮时,它会高亮显示该表单元格。

所有这些都很好,唯一的问题是表单元格被高亮显示的方式。单元格的边框未完全亮显。您可以在JSFiddle中看到演示。我还上传了以下图片:

https://imgur.com/a/FAHNYOn

我可以改变单元格的背景颜色,它可以工作,但在所有单元格都高亮显示的情况下看起来很难看。

有人能指出我在这里做错了什么吗?