Unwanted vertical space below rows of gridded images

Question

I'm trying to create a grid with fixed dimensions containing fixed sized images with no gaps/padding/margins between images. I've been unable to remove small vertical gaps between rows of images. I suspect this has something to do with using display: table-cell, but I'm new to CSS and I've tried everything I can find from searching (including setting margin, padding and border-spacing to 0px).

Link to the jsfiddle: https://jsfiddle.net/monica_a/pfs4t67o/5/

The grid cells (tiles) are contained in a container (tilecontainer class), then grouped into rows (tilerow class), and on the jsfiddle link. The CSS:

.tilecontainer {
  overflow: scroll;
}

.tilerow {
    display: block;
    overflow: hide;
}

/*Defines the space a single tile takes up*/
.tileholder {
  display: table-cell;
  background-color: powderblue;
  overflow: hide;
  width: 100px;
  height: 100px;
}

/* image representation of a tile */
.tileimage {
    width: 100px;
    height: 100px;
}

Nothing I try seems to remove these vertical gaps below images. Perhaps this is the wrong approach or overly complicated?