Question

我正在使用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;
}

这是如何工作的：

通过单击添加列添加几列，然后键入新添加列的表格单元格，它将自动创建一个新行。创建几行。然后从表单元格中删除值。现在，当您按保存按钮时，它将突出显示该表格单元格。

所有这些都很好，唯一的问题是突出显示表格单元格的方式。单元格的边框没有完全突出显示。您可以在JSFiddle中看到该演示。我也将其图像上传为：

https://imgur.com/a/FAHNYOn

我可以更改单元格的背景颜色，它可以工作，但所有单元格都突出显示时看起来很难看。

有人可以指出我在这里做错了吗？

Answer 1

看起来边界不完全可见，因为被其他单元格的边界覆盖了。

我建议的一种快速解决方案是使用outline属性而不是边框来突出显示单元格：

.table.submitted td.ng-invalid {
    outline: 1px solid red;
    outline-offset: -1px;
}

或者您可以简单地扩大边界以覆盖其他单元格的边界，但是我认为这不是最好的方法：

border: solid 3px red;

希望这可以帮助您获得理想的结果！

Answer 2

以下CSS-Tricks文章介绍了针对此问题的更好，更完整的解决方案：https://css-tricks.com/table-border-collapse-issue/

基本上，您需要做的是在<div>内放置一个<td>元素，并使用负边距和z索引，您将立即完成工作。直接参考链接的文章以获取带有Codepen的完整示例。

检查一下，让我知道这是否适合您！：）

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

2 个答案: