title: Prevent collapse of empty rows in HTML table via CSS
body: <p>I have a HTML table as follows:</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 border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;Row with text&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;&lt;!-- Empty row --&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When you run this you'll see the second row is collapsed, but I'd rather it was rendered uncollapsed, with the same height as the first row. One way of doing this is to put a <code>&amp;nbsp;</code> entity, as follows:</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 border="1"&gt;
      &lt;tr&gt;
          &lt;td&gt;Row with text&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;!-- Empty row --&gt;
      &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way I can achieve the second result, via CSS, using the HTML from the first snippet?</p>