Is there a way I can prevent dashed border to merge?

Question

I have border:dashed applied to my table cells and in some places the dashes merges with the ones of the other table cell. See the image below. Is there a way I can prevent this without applying the style to the row directly?

Later edit: I have applied the style to the tr directly and got the same result.

Answer 1

You must be collapsing the border of your table element, so get rid of that and use border-collapse: separate; with border-spacing: 1px; instead

table {
    border-spacing: 1px;
    border-collapse: separate;
}

table tr td {
    border-bottom: 1px dashed #000;
}

Demo

Demo 2 (See the corners when the borders are collapsed)