Stop table cells from overlapping HTML CSS

Keywords: html css css-tables


I am trying to set up a responsive table where each cell contains an image but with the code I have, the cells overlap.

Widths are set to 100% rather than fixed width so not sure why this is happening? The code that I have is below:

I need the rows to not overlap when the screen is resized and the gap to not get bigger when the screen is made smaller.