vertical align and valign not working on table!

Question

I am dynamically generating a table using AJAX. The structure of the table to be populated is as follows:

<table id="foobar"  style="width:100%">
    <thead>
        <tr>
            <th style="width:20%;"></th>
            <th style="width:55%;"></th>
            <th title="widget name">Name</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

The cell data contains either:

• an image
• a div wrapper with anchor tags and paragraphs

I tried the following:

1. setting valign="top" (separately) at the table, th and tr levels - it had no effect
2. setting style="vertical-align: top;" (separately) at the table, th and tr levels - it had no effect

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.

How can I force a table to vertically align its cell contents to top (bearing in mind that the cells contain block elements?

Answer 1

Here is a basic table example with TH and TD tags where the content is set to "vertical-align:top".

Demo: http://jsfiddle.net/HAQ3s/472/

th, td {
    vertical-align: top;
}

<table>
    <tr>
        <th>A<br /><br /></th>
        <th>B</th>
        <th>C</th>
    </tr>
    <tr>
        <td>1<br /><br /></td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

Answer 2

valign should work no matter what if all settings that we see here are those that are actually used.

Global CSS settings

But I suspect a different gunman here. Did you check your global CSS file what it defines for TH elements? Maybe that's what's giving you headaches.