Image margins & padding

After exploring the html tables and flex box, etc I am coming back to TablePress but I am struggling.
This table https://patchencalifornia.com/home/trees/bargains/ is actually 3 tables because I have not been able to get the column widths I want in a single table.
Here are the shortcodes.
[table id=12a responsive=scroll column_widths=”50%|50%”/]
[table id=12b responsive=scroll column_widths=”20%|8%|8%|8%|8%|8%|8%|8%|8%|8%|8%”/]
[table id=12c responsive=scroll column_widths=”20%|8%|8%|8%|8%|8%|8%|8%|8%|8%|8%”/]

Currently I am trying to get rid of the (margin, padding,?) around the images in column 2 of 12c and at the same time make all rows the same height.
Note that a 10 x 10 px image in column 2, row 5 produces a row height of 50 to 60 px but another 10 x 10 image in column 4, row 4 results in a different row height – very confusing. These are some of the css approaches I have tried (among many).

This works in 12b but I cannot get it to work, combined with the data in 12c
/* Bargains Header2 */
.tablepress-id-12b .row-1 td {
font-size: 16px;
font-weight: bold;
color: #006400;
background-color: #dafabe;
text-align: center;
}

Here the horizontal align works but not the vertical.
/* Bargains */
/* — table */
.tablepress-id-12c th,
.tablepress-id-12c td {
text-align: center;
vertical-align: middle;
}
Trying to eliminate the space around the image.
.tablepress-id-12c .row-4 td {
padding: 1px;
}

The page I need help with: [log in to see the link]