title: vertical align and valign not working on table!
body: <p>I am dynamically generating a table using AJAX. The structure of the table to be populated is as follows:</p>
  
  <pre><code>&lt;table id="foobar"  style="width:100%"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th style="width:20%;"&gt;&lt;/th&gt;
              &lt;th style="width:55%;"&gt;&lt;/th&gt;
              &lt;th title="widget name"&gt;Name&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The cell data contains either:</p>
  
  <ul>
  <li>an image</li>
  <li>a div wrapper with anchor tags and paragraphs</li>
  </ul>
  
  <p>I tried the following:</p>
  
  <ol>
  <li>setting <code>valign="top"</code> (separately) at the <code>table</code>, <code>th</code> and <code>tr</code> levels - it had no effect</li>
  <li>setting <code>style="vertical-align: top;"</code>  (separately) at the <code>table</code>, <code>th</code> and <code>tr</code> levels - it had no effect</li>
  </ol>
  
  <p>I don't want to set the align property at the cell level because it will cause too much unnecessary bloat if the table contains several (say hundreds of) rows.</p>
  
  <p>How can I force a table to vertically align its cell contents to top (bearing in mind that the cells contain block elements?</p>