title: Table cell height longer than content by default in Firefox
body: <p>Just so you know, I'm  new to html and CSS and I'm sorry if the question is stupid, but I have a problem that seems simple, and yet I've been searching for a solution for hours and couldn't find any. There are many forums discussing similar issues but none of the solutions applied to my particular issue. I have simplified the page as much as I could to isolate the problem and this is what I got:</p>
  
  <p><img src="https://i.stack.imgur.com/A5UYw.jpg" alt=""></p>
  
  <p>As you can see, Google Chrome and Safari keep the first cell only as high as its content, exactly as I want it to be displayed. Firefox, however, arbitrarily stretches the cell to a random and unnecessarily long height.</p>
  
  <p>What I have tried with no success so far:</p>
  
  <ul>
  <li>Set the first cell height as "auto" (although I think this is already the default).</li>
  <li>Set the first cell height as 1px</li>
  <li>Set the "oi" td and/or tr height as "100%".</li>
  <li>Set the first cell to "display:block;", which gave me an even more intriguing result:</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/KqBUB.png" rel="nofollow noreferrer">http://i.stack.imgur.com/KqBUB.png</a></p>
  
  <p>How can I specify that I want the cell only as high as its contents? If "auto" doesn't do that, what does? None of the other possible "height" values seem to do the trick. Does anyone have any idea why this happens and how to fix this problem?</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;table border="1"&gt;
   &lt;tr&gt;
    &lt;td&gt;
  
     1st cell 1st cell&lt;br/&gt;
     1st cell 1st cell&lt;br/&gt;
     1st cell 1st cell&lt;br/&gt;
     1st cell 1st cell&lt;br/&gt;
  
    &lt;/td&gt;
    &lt;td rowspan="2" style="width: 50%; text-align: center;"&gt;
  
     blablablablaabl&lt;br/&gt;
     blablablalablab&lt;br/&gt;
     bkababakbakabka&lt;br/&gt;
     LONG STUFF&lt;br/&gt;
     blablablablaabl&lt;br/&gt;
     blablablalablab&lt;br/&gt;
     bkababakbakabka&lt;br/&gt;
     blablablablaabl&lt;br/&gt;
     blablablalablab&lt;br/&gt;
     bkababakbakabka&lt;br/&gt;
     LONG STUFF&lt;br/&gt;
     blablablablaabl&lt;br/&gt;
     blablablalablab&lt;br/&gt;
     bkababakbakabka&lt;br/&gt;
  
    &lt;/td&gt;
    &lt;td rowspan="2"&gt;
  
     right content
  
    &lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;
    &lt;td&gt;
  
     oi
  
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>