Well for starters I'm having a really difficult time reading the code because it is un-aligned. Can you post a version with organized nested tables, or even attach the .html file (I assume pasting the code here un-aligned everything)?
Secondly, I'm correct in that you are looking to make each of the 3 columns the same width as the first right? That's why I suggested you make them each their own table within a table with a set height. Then you could write a query to make the 3 columns 100% on mobile.
Thanks for the article! Interesting approach. I think that there was just some sort of glitch, because when I re-tested today the problem was no longer occurring. Apparently emails fix themselves sometimes!
Make sure the containing cell for whatever you are styling with the dashed border has the same styles. So if the background of your parent is #f1f1f1 then also give that style to the <td> containing the parent table. I hope that wasn't as confusing as it sounds!
Why do you need them to all be the same height? You could always set a fixed height on the <div>'s. On mobile I don't see as much of a reason to have them be the same height though. I suggest you set up a media query to make the 3 columns all 100% on mobile. Then you would be able to make them all separate tables.