Google chrome bug? Select boxes in <th>

I have a table where a select box goes in one on the <th> wrappers inside <thead>.

Has anyone encountered a similar problem in Google Chrome, where the select box is unresponsive within this tag?

The table has uses: http://autobahn.tablesorter.com/jquery.tab开发者_高级运维lesorter.min.js which perhaps is causing the interference? ( see http://tablesorter.com/docs/ )

<th class="{sorter: false}">Location
    <!-- country filter -->
    <select name="countryfilter" id="countryfilter">
        <option value="ANY">SHOW ALL</option>
        <option value="GB">GB</option>
            [etc..]
    </select>
    <!-- end -->
</th>

Tried using developer tools, but no JS warnings/errors showed up in Audit.

select box shows the options in FF Opera IE7/IE8 and Opera. But it fails in chrome, safari and IE9. Safari and Chrome are using webkit so is most certainly a browser implementations issue or an issue with the tablesorter pluigin. Contact the creator of the plugin to have a look at it.

What you can do to work around this, is changing you html to use td in the header,

<td class="header">
   <select name="countryfilter" id="countryfilter">
      <option value="ANY">SHOW ALL</option>
      <option value="GB">GB</option>
   </select>
</td>

and in the css file for the plugin append td.header this will apply the same style for td as for the rest of the th elements.

table.tablesorter thead tr th, table.tablesorter tfoot tr th, 
td.header 
{
   background-color: #e6EEEE;
   border: 1px solid #FFF;
   font-size: 8pt;
   padding: 4px;
}