How do I highlight table cell borders when empty? - html

Question

I am using AngularJS to create dynamic rows and columns. And then on the save button click when there is no data in any cell I want highlight that cell.
So below is the JSFiddle for my demo:
http://jsfiddle.net/jyshdf85/
My table code as below:
<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">...</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>
I have my CSS as:
.table.submitted td.ng-invalid {
border-color: red;
}
How this works is:
Add a couple of columns by clicking on add column, then type in the table cell of the newly added columns,it would create a new row automatically. Create couple of rows. Then remove the values from the table cell. Now when you press Save button it highlights that table cell.
All this works fine the only issue being the way the table cell is being highlighted. The border of the cell is not fully highlighted. You can see the demo in the JSFiddle. I have also uploaded the image of this as:
https://imgur.com/a/FAHNYOn
I can change the background color of the cell and it works but looks ugly with all cells highlighted.
Can anyone point out what I am doing wrong here?

Answer 1

Looks like the border is not fully visible because covered by other cells' border.
A quick solution I suggest is to use the outline property instead of the border to highlight cells:
.table.submitted td.ng-invalid {
outline: 1px solid red;
outline-offset: -1px;
}
Or you can simply make the border wider, to cover other cells' border, but I think this is not the best way:
border: solid 3px red;
Hope this helps you getting the desired result!

Answer 2

A better and complete solution to this problem is covered in the following CSS-Tricks article: https://css-tricks.com/table-border-collapse-issue/
Basically, what you need to do is to put a <div> element inside your <td> and, using negative margins and z-index, you'll get the job done in no time. Refer directly to the article linked for a complete example with a Codepen.
Check it out and let me know if this works for you! :)