Hello,

I'm building an email that has a three column table layout for events that should have bottom borders underneath each event. However, the layout breaks in Android 6.0 in Gmail and only some of the borders appear.

I have the same issue with bottom borders for another table for News entries, where the border only appear under some of the news stories. One of the issues could be that whenever the email renders in the browsers (Chrome or Firefox), it changes the shorthand border styling to longhand properties (i.e. instead of border-bottom: 1px solid gray;, it's renders to border-bottom-width: 1px; border-bottom-color: #63666a; border-bottom-style: solid;). Is there any way to prevent this??

Here is the code for the three column layout:

  <table border="0" cellpadding="0" cellspacing="0" align="center" class="columns" style="width: 580px; min-width: 580px; margin-top: 16px; border-collapse: collapse; border: 0px solid transparent;">
    <tr>
      <td width="100%" style="border: 0px solid transparent;">
        <table class="list-mobile" border="0" cellpadding="0" cellspacing="0" style="width: 580px; min-width: 580px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; border: 0px solid transparent;">
          <tr width="100%">
            <td>  
              <table class="list-mobile" border="0" cellpadding="0" cellspacing="0" style="width: 580px; min-width: 580px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; border: 0px solid transparent;">
                <tr>
                  <td class="content" width="100%" style="border-bottom-width: 1px; border-bottom-color: #d0d1d2; border-bottom-style: solid; padding: 16px 8px;">
                    <table class="event-date-table" valign="top" style="display: inline-block; width: 28%; height: auto;">
                      <tr>
                        <td>
                          <table class="event-date" style="display: inline-block;">
                            <tr>
                              <td>
                                <time itemprop="startDate" datetime="2018-01-22T06:45:00+00:00">
                                  <span style="font-weight: 700; white-space: nowrap; color: #616568;">  
                                    Jan. 22
                                  </span>
                                  <br>
                                  <span style="white-space: nowrap; font-weight: 300;">        
                                    1:45 a.m.
                                  </span>
                                </time>
                              <meta itemprop="datePublished" datetime="2018-01-19T17:05:00+00:00">
                              <meta itemprop="dateModified" content="2018-01-30T17:53:58+00:00">
                              </td>
                            </tr>
                          </table>

                        </td>
                      </tr>
                    </table>

                    <table class="event-title-table" style="display: inline-block; width: 45%;">
                      <tr>
                        <td>
                          <table class="event-title" style="display: inline-block;">
                            <tr>
                              <td>
                                <a href="http://10.10.3.35/events/heres-a-title-20180122-145am?utm_source=admission&amp;utm_medium=email&amp;utm_campaign=email-2-20180221&amp;utm_term=public" target="_blank" align="left" valign="top" style="font-weight: 300; color: #003da5; font-size: 20px; cursor: pointer; text-decoration: none; font-family: Helvetica, Arial, sans-serif; line-height: 24px; margin: 0 0 16px; padding: 0;">
                                  Here's a title hiii
                                </a>                              
                              </td>
                            </tr>
                          </table>
                          <table>
                            <tr>
                              <td style="font-size: 12px; font-weight: 300; padding-top: 3px; padding-left: 3px;">
                                Campus activities
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>

                    <table class="tickets-table" valign="top" style="display: inline-block; width: 20%; height: auto;">
                      <tr>
                        <td>
                          <table class="ticket-availability" style="display: inline-block; font-weight: 300; white-space: nowrap;">
                            <tr>
                              <td>
                                Sold out
                              </td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>


                  </td>
                </tr>
              </table>

            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>


And here's the code for the news table that is also supposed to have a bottom border under each news story:

<table border="0" cellpadding="0" cellspacing="0" align="center" class="columns" style="width: 580px; min-width: 580px; margin-top: 16px; border-collapse: collapse; border: 0px solid transparent;">
  <tr>
    <td width="100%" style="border: 0px solid transparent;">
      <table class="list-mobile" border="0" cellpadding="0" cellspacing="0" style="width: 580px; min-width: 580px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; border: 0px solid transparent;">
        <tr width="100%">
          <td>
            <table class="list-mobile" border="0" cellpadding="0" cellspacing="0" style="width: 580px; min-width: 580px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; border: 0px solid transparent;">
              <tr>
                <td class="content" style="border-bottom-width: 1px; border-bottom-color: #63666a; border-bottom-style: solid; padding: 16px 8px;">
                  <table>
                    <tr>
                      <td>
                        <a href="http://10.10.3.35/news/2018/no-image-entry-1?utm_source=admission&amp;utm_medium=email&amp;utm_campaign=email-2-20180221&amp;utm_term=public" target="_blank" align="left" valign="top" style="font-weight: 300; color: #003da5; font-size: 20px; cursor: pointer; text-decoration: none; font-family: Helvetica, Arial, sans-serif; line-height: 24px; margin: 0 0 16px; padding: 0;">
                          No Image Entry 1
                        </a>
                      </td>
                    </tr>
                  </table>

                  <table>
                    <tr>
                      <td style="font-size: 14px; padding-top: 3px; font-weight: 300;">
                        Jan 16, 2018
                      </td>
                    </tr>
                  </table>

                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr width="100%">
          <td>
            <table class="list-mobile" border="0" cellpadding="0" cellspacing="0" style="width: 580px; min-width: 580px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; border: 0px solid transparent;">
              <tr>
                <td class="content" style="border-bottom-width: 1px; border-bottom-color: #63666a; border-bottom-style: solid; padding: 16px 8px;">
                  <table>
                    <tr>
                      <td>
                        <a href="http://10.10.3.35/news/2018/test-story-4?utm_source=admission&amp;utm_medium=email&amp;utm_campaign=email-2-20180221&amp;utm_term=public" target="_blank" align="left" valign="top" style="font-weight: 300; color: #003da5; font-size: 20px; cursor: pointer; text-decoration: none; font-family: Helvetica, Arial, sans-serif; line-height: 24px; margin: 0 0 16px; padding: 0;">
                          Test story 4 
                        </a>
                      </td>
                    </tr>
                  </table>

                  <table>
                    <tr>
                      <td style="font-size: 14px; padding-top: 3px; font-weight: 300;">
                        Jan 12, 2018
                      </td>
                    </tr>
                  </table>

                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr width="100%">
          <td>
            <table class="list-mobile" border="0" cellpadding="0" cellspacing="0" style="width: 580px; min-width: 580px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; border: 0px solid transparent;">
              <tr>
                <td class="content" style="border-bottom-width: 1px; border-bottom-color: #63666a; border-bottom-style: solid; padding: 16px 8px;">
                  <table>
                    <tr>
                      <td>
                        <a href="http://10.10.3.35/news/2018/test-story-3-with-a-very-long-headline-as-a-test?utm_source=admission&amp;utm_medium=email&amp;utm_campaign=email-2-20180221&amp;utm_term=public" target="_blank" align="left" valign="top" style="font-weight: 300; color: #003da5; font-size: 20px; cursor: pointer; text-decoration: none; font-family: Helvetica, Arial, sans-serif; line-height: 24px; margin: 0 0 16px; padding: 0;">
                          Test Story 3 With a Very long Headline as a test
                        </a>
                      </td>
                    </tr>
                  </table>

                  <table>
                    <tr>
                      <td style="font-size: 14px; padding-top: 3px; font-weight: 300;">
                        Jan 12, 2018
                      </td>
                    </tr>
                  </table>

                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr width="100%">
          <td>
            <table class="list-mobile" border="0" cellpadding="0" cellspacing="0" style="width: 580px; min-width: 580px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0; border: 0px solid transparent;">
              <tr>
                <td class="content" style="border-bottom-width: 1px; border-bottom-color: #63666a; border-bottom-style: solid; padding: 16px 8px;">
                  <table>
                    <tr>
                      <td>
                        <a href="http://10.10.3.35/news/2018/test-story-2?utm_source=admission&amp;utm_medium=email&amp;utm_campaign=email-2-20180221&amp;utm_term=public" target="_blank" align="left" valign="top" style="font-weight: 300; color: #003da5; font-size: 20px; cursor: pointer; text-decoration: none; font-family: Helvetica, Arial, sans-serif; line-height: 24px; margin: 0 0 16px; padding: 0;">
                          Test Story 2 With a Long Headline
                        </a>
                      </td>
                    </tr>
                  </table>

                  <table>
                    <tr>
                      <td style="font-size: 14px; padding-top: 3px; font-weight: 300;">
                        Jan 12, 2018
                      </td>
                    </tr>
                  </table>

                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>