Table borders overlap when table is collapsed

I created an HTML table which is responsive. Using a media query I setted it to appear collapsed until 768px; After that it is 100% widthed.

The problem I encounter is that the table’s borders overlaps when it’s collapsed.

The border-bottom, and the border-top of any given cell type (which is not outer), touches each other and in some cases appear double. It looks awful.

I tried to use border-collapse: collapse for all 's which off course are the most dominant of cells, but it didn’t help.
I think there is a manipulation with the operator +, but I don’t know how it should be used in that particular case and how it is best to phrase an English search query in Google to find a most particular solution with this operator, regarding tables.

Edit: After being advised to add it — here is a direct example of the table. Just widen the browser window and the border duplication will appear.

Hi there @benos. It is difficult to comment without seeing the code. I know @PaulOB had a responsive table solution but I’ll be jiggered if I can locate it.

Were you thinking of this one, @Gandalf?

2 Likes

Yup, that’s the one. Thanks TB

1 Like

Hi guys, here is a live example of the table. Collapse the browser window and you could see the border duplication right away.

HI,

You could just add a negative margin to the th and td so that double borders don’t show.

e.g.

@media screen and (max-width: 768px){
td,th{margin:-1px 0}
}

You don’t seem to have classes on your table so of course that code will affect all td and th elements in that media query breakpoint.

2 Likes

Huge like ! Worked amazingly fine, thank you also for that note about the classes.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.