title: Unable to render vertically lay out addition of two numbers with MathJax and MathML
body: <p>I would like to render two numbers on a web page like this:</p>
  
  <pre><code>    123
    + 456
   ______
  </code></pre>
  
  <p>I've found this example:</p>
  
  <pre><code>&lt;mstack&gt;
    &lt;mn&gt;496&lt;/mn&gt;
    &lt;msrow&gt; &lt;mo&gt;+&lt;/mo&gt; &lt;none/&gt; &lt;mn&gt;28&lt;/mn&gt; &lt;/msrow&gt;
    &lt;msline/&gt;
  &lt;/mstack&gt;
  </code></pre>
  
  <p>but <a href="http://docs.mathjax.org/en/latest/mathml.html" rel="nofollow">MathJax doesn't support mstack, msrow and msline elements</a>.I've attempted to use a mtable</p>
  
  <pre><code>&lt;body&gt;
      &lt;math xmlns="http://www.w3.org/1998/Math/MathML"&gt;
          &lt;mtable id="test" columnalign="right"&gt;
              &lt;mtr&gt;&lt;mtd&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mn&gt;12321&lt;/mn&gt;&lt;/mtd&gt;&lt;/mtr&gt;
              &lt;mtr&gt;&lt;mtd&gt;&lt;mo&gt;+&lt;/mo&gt;&lt;/mtd&gt;&lt;mtd&gt;&lt;mn&gt;45665445&lt;/mn&gt;&lt;/mtd&gt;&lt;/mtr&gt;
         &lt;/mtable&gt;
      &lt;/math&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>with this CSS:</p>
  
  <pre><code> &lt;style type="text/css"&gt;
         #test
         {
             border-bottom:1px solid black;
         }
      &lt;/style&gt;
  </code></pre>
  
  <p>but the bottom border is overlapping the lower number. Is there a way to achieve this layout with MathJax/MathML?</p>