HTML Eメール：画像を重なり合わせる方法は？

Question

私は電子メールのための基金を使用して、メニュー項目とNILE-ロゴの下に水平定規<hr>を配置したいよ：

私は時間hr { margin-top: -1rem; }を移動すると、これを達成できます。

残念ながら（Litmusに応じて）CSSプロパティマージンがOutlookのメールクライアントでサポートされておらず、次のように表示されます。私の第二の試みはのborder-bottomとROWSPAN使用することです

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

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

hrの代わりにセルをテーブルに追加しますが、境界線が重ならないように画像が行にまたがります。私はロゴ画像の下にレイアウト・モックアップへの正確な水平定規を配置しなければならないのは何の選択肢

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

？

Answer 1

3つのテーブル行を作成することで解決できました。ロゴ画像-tdにrowspan = 3を追加し、最後のtd行にborder-bottomを追加しました。