CODEWITHSUNDEEP
htmlcssborderhtml-table
fDruga
fDruga

Reputation: 269

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

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?

the merged dashes emphasized with red

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

Upvotes: 7

Views: 961

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157334

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)

Upvotes: 4

Related Questions