title: Table expand row with just CSS
body: <p>I have some markup like so:</p>
  
  <pre><code>&lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Col1&lt;/th&gt;
              &lt;th&gt;Col2&lt;/th&gt;
          &lt;tr&gt;
      &lt;/thead&gt;  
  
      &lt;tbody&gt;
          &lt;tr class="main"&gt;
              &lt;td&gt;some content&lt;/td&gt;
              &lt;td&gt;some content2&lt;/td&gt;
          &lt;tr&gt;
          &lt;tr class="more"&gt;
              &lt;td colspan="2"&gt;
                  &lt;div class="more-link"&gt;&lt;a tabindex="0" href="#"&gt;Show more info&lt;/a&gt;&lt;/div&gt;
                  &lt;div class="more-info"&gt;
                      more info goes here
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And some CSS:</p>
  
  <pre><code>td, th{
      border: 1px solid red;
  }
  
  .main td{
      height: 50px;
      width: 300px;
      vertical-align: top;
  }
  
  .main td{
   border-bottom: 0;   
  }
  
  .more td{
      border-top: 0;
      height: 0;
  }
  
  .more-link{
      position: relative;
      top: -30px;
  }
  
  .more-link:focus + div, .more-link:active + div{
      height: auto;
  }
  </code></pre>
  
  <p>What I want to do is that when the "show more info" link is clicked, the table row called "more" expands.</p>
  
  <p>The problems:</p>
  
  <ul>
  <li>There is no effect if I set the <code>td</code> inside <code>more</code> to have a height of 0;</li>
  <li>If I set height of the <code>more-info</code> div to <code>0</code>, or <code>display:none</code>, the table row still takes up space.</li>
  </ul>
  
  <p>I would like to do this with just CSS, javascript can be used to make it better, but the basics should just work without javascript.</p>
  
  <p>How can I get my <code>more</code> row to expand when the <code>show more info</code> link is clicked?</p>
  
  <p>And a fiddle: <a href="http://jsfiddle.net/QJr2e/" rel="nofollow">http://jsfiddle.net/QJr2e/</a></p>