Error with foundation email in Gmail

Question

I'm developing a responsive email marketing using foundation for email.

I've already validated all email clients, but I'm having a problem with Gmail, specifically on Android.

Apparently, something is adding white space between each table.

Is there any solution to the problem?

Below is the link for my code in codepen(the code is to big to post here) and the print showing the error.

Thanks

https://codepen.io/AciMatta/pen/ZjRJwm

                    <table class="row" style="border-spacing: 0;border-collapse: collapse;padding: 0;vertical-align: top;text-align: left;">
                  <tbody>
                    <tr style="padding: 0;vertical-align: top;text-align: left;">
                      <th class="small-12 large-12 first columns no-padding" style="padding: 0 !important;">
                        <table style="border-spacing: 0;border-collapse: collapse;padding: 0;vertical-align: top;text-align: left;">
                          <tbody>
                            <tr style="padding: 0;vertical-align: top;text-align: left;">
                              <th>
                                <img src="http://placehold.it/500x200.jpg" alt="Reinventa la forma de jugar" width="650" height="187" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;width: 100%;max-width: 100%;clear: both;display: block;">
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                    </tr>
                  </tbody>
                </table>

Answer 1

Hope this helps.

On table :

cellspacing="0"

On every image :

style="display:block;"

Answer 2

You are using TH in your table rows. Try putting style="margin:0px; padding:0px;" and see if that helps.

                    <table class="row" style="border-spacing: 0;border-collapse: collapse;padding: 0;vertical-align: top;text-align: left;">
                  <tbody>
                    <tr style="padding: 0;vertical-align: top;text-align: left;">
                      <th class="small-12 large-12 first columns no-padding" style="padding: 0 !important;">
                        <table style="border-spacing: 0;border-collapse: collapse;padding: 0;vertical-align: top;text-align: left;">
                          <tbody>
                            <tr style="padding: 0;vertical-align: top;text-align: left;">
                              <th style="margin:0px; padding:0px;">
                                <img src="http://placehold.it/500x200.jpg" alt="Reinventa la forma de jugar" width="650" height="187" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;width: 100%;max-width: 100%;clear: both;display: block;">
                              </th>
                            </tr>
                          </tbody>
                        </table>
                      </th>
                    </tr>
                  </tbody>
                </table>

TH by design is meant to be for headings (table headings). Fonts will be bold and adds a little space around it. Unless you are using it to break apart columns to rows, i would recommend sticking to table data(td).

Hope the above helps.

Answer 3

My reputation does not allow me to comment. Have you tried the following:

table .row {
   margin: 0;
   padding:0;
}

or

table .row {
   margin-top: 0;
   padding-top:0;
}

Hope this helps...