title: Html email and fluid table with changing borders
body: <p>I have some design requirements for an email template where I have two &quot;challenges&quot;:</p>
  <ol>
  <li>two columns need to flip to one column</li>
  <li>some visible border lines need to be switched from vertical to horizontal</li>
  </ol>
  <p>The following shows how it should look (2 columns on the left for desktop, 1 column on the right for mobile):</p>
  <p><a href="https://i.stack.imgur.com/Octpf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Octpf.png" alt="layout" /></a></p>
  <p>The whole email is based on responsive tables and the two-column part is implemented as follows right now:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table cellpadding="5" cellspacing="0"
      style="background-color:#F6F6F6; font-size: 14px; color:#58595b; width:100%; border-collapse:collapse;"&gt;
      &lt;tr&gt;&lt;td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;
      &lt;td valign="top" style="border-right: 1.5px solid; border-color: #d0d0d0; padding-right:40px; text-align:right; width:42%; vertical-align:top;"&gt;
        Start point
      &lt;/td&gt;
      &lt;td valign="top" style="padding-left:40px; vertical-align:top;"&gt;
        &lt;strong&gt;Fri, January 12, 2023 12:00&lt;/strong&gt;
        &lt;br /&gt;
        Harbour, Seatown
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;&lt;td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;
      &lt;td valign="top" style="border-right: 1.5px solid; border-color: #d0d0d0; padding-right:40px; text-align:right; width:42%; vertical-align:top;"&gt;
        End point
      &lt;/td&gt;
      &lt;td valign="top" style="padding-left:40px; vertical-align:top;"&gt;
        &lt;strong&gt;So, January 18, 2023 10:00&lt;/strong&gt;
        &lt;br /&gt;
        Central Station, Capital
      &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;&lt;td align="center" valign="top" height="10" colspan=2 style="line-height: 10px; font-size: 10px;"&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I tried the approach with having a left and a right table (explained <a href="https://www.arclab.com/en/amlc/responsive-two-column-fluid-email-template.html" rel="nofollow noreferrer">here</a>) but the problem is that I do not use fixed widths.</p>
  <p>How could I achieve the required design with a responsive mail template?</p>