HTML Email: How to make image overlapping border?
<p>I'm using Foundation for Emails and want to position a horizontal ruler <code>&lt;hr&gt;</code> below the menu-item and the NILE-Logo:</p>

<p><a href="https://i.stack.imgur.com/12aZx.png" rel="nofollow"><img src="https://i.stack.imgur.com/12aZx.png" alt="Nominal Situation"></a></p>

<p>I could achieve this with moving hr <code>hr { margin-top: -1rem; }</code> .</p>

<p>Unfortunately (according to <a href="https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin" rel="nofollow">Litmus</a>) CSS property margin is not supported in Outlook Mail Client and it is displayed like this:</p>

<p><a href="https://i.stack.imgur.com/pjRlQ.png" rel="nofollow"><img src="https://i.stack.imgur.com/pjRlQ.png" alt="enter image description here"></a></p>

<pre><code>&lt;center class="header float-center" align="center" data-parsed=""&gt;
  &lt;table align="center" class="menu float-center"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th class="menu-item float-center"&gt;
                  &lt;%= link_to t('view.nav.women'), seo_url(Spree::Taxon.new_in) %&gt;
                &lt;/th&gt;
                &lt;th class="menu-item float-center"&gt;

                  &lt;%= link_to t('view.nav.men'), seo_url(Spree::Taxon.new_in) %&gt;
                &lt;/th&gt;
                &lt;th class="menu-item float-center"&gt;
                  &lt;%= link_to root_path do %&gt;
                    &lt;img src="nile_logo.png" alt="NILE Logo" width="120px" height="70px" /&gt;
                  &lt;% end %&gt;
                &lt;/th&gt;
                &lt;th class="menu-item float-center"&gt;
                  &lt;%= link_to t('view.nav.stores'), page_path('stores') %&gt;
                &lt;/th&gt;
                &lt;th class="menu-item float-center"&gt;
                  &lt;%= link_to t('view.nav.lifestyle'), page_path('lifestyle') %&gt;
                &lt;/th&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/center&gt;
&lt;hr&gt;
</code></pre>

<p>My second attempt is to use rowspan with border-bottom to table cells instead of hr but the image spans the row so that the border is not overlapped.</p>

<pre><code>&lt;center class="header float-center" align="center" data-parsed=""&gt;
  &lt;table align="center" class="menu float-center"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;
          &lt;table&gt;
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;th class="border menu-item float-center"&gt;
                  &lt;%= link_to t('view.nav.women'), seo_url(Spree::Taxon.new_in) %&gt;
                &lt;/th&gt;
                &lt;th class="border menu-item float-center"&gt;
                  &lt;%= link_to t('view.nav.men'), seo_url(Spree::Taxon.new_in) %&gt;
                &lt;/th&gt;
                &lt;th class="menu-item float-center"&gt;
                  &lt;%= link_to root_path do %&gt;
                    &lt;img src="https://www.nile.ch/nile_logo.png" alt="NILE Logo" width="120px" height="70px" /&gt;
                  &lt;% end %&gt;
                &lt;/th&gt;
                &lt;th class="border menu-item float-center"&gt;
                  &lt;%= link_to t('view.nav.stores'), page_path('stores') %&gt;
                &lt;/th&gt;
                &lt;th class="border menu-item float-center"&gt;
                  &lt;%= link_to t('view.nav.lifestyle'), page_path('lifestyle') %&gt;
                &lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
          &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
&lt;/center&gt; 
</code></pre>

<p>What alternatives do I have to position the horizontal ruler accurate to the layout-mockup below the logo-image?</p>