title: Make all tds of equal height, when each td contains a div with dynamic content?
body: <p>I'm trying to make all tds in a table of equal height. I have four cells, each with a width of 25%. Each td will have a div based content, which will be dynamic and varying in length. I cannot change the structure of it. </p>
  
  <p>Any help will be greatly appreciated. Thanks..!!</p>
  
  <p>Fiddle link: <a href="http://jsfiddle.net/binita07/kVm7P/1/" rel="nofollow noreferrer">http://jsfiddle.net/binita07/kVm7P/1/</a></p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="test"&gt;
      &lt;table&gt;
          &lt;td&gt;&lt;div&gt;Dummy Content 1&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Dummy Content 2&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Dummy Content 1 and will be more&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div&gt;Dummy Content 4&lt;/div&gt;&lt;/td&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>CSS</h1>
  
  <pre><code>.test{
      width:400px;
      background:#f00;
  }
  table{
      border-collapse:collapse;
      padding:0;
  }
  table td{
      width:25%;
      display:table-cell;
      vertical-align:top;
      min-height:30px;
  }
  table td div{
      background:green;
      height:100%;
  }
  </code></pre>