I have a problem with a table header containing input boxes. I have similar div's in the rest of the table and they work fine. the div is hidden by default, and is absolutely positioned The table inside the div usually just contains a few columns with a single form element in each column. This would be typical:
<a>show editrow</a>
<div class="editrow">
<form>
<table>
<tr>
<td>
<input type="text" />
</td>
...
<td>
<input type="submit" />
</td>
</tr>
</table>
</form>
</div>
I have this in a th element in the header, and in each table row below. When I put it in a th element I can't click on the input boxes, but the select boxes, and checkboxes work fine. I am using JQuery table sorter so my table headers have to use thead, tr, th tags. The frustrating thing is the only difference between what works and what doesn't work is the containing cell, td vs, th. like so:
<th>
doesn't work
</th>
vs.
<td>
does work
</td>
The only fix I have found is to move the div outside of the header, and use some more complicated javascript to find it so I can show/hide it/etc. I don't like that solution, because I'd have to rewrite a lot of pages, and it just doesn't make sense. I put the link and div in the header to keep it from being sorted with the rest of the table.
Any ideas as to why? or how I can fix it without removing the div from all my table headers?