oompahloompah oompahloompah - 1 month ago 7
CSS Question

vertical align and valign not working on table!

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

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.