HTML
<html>
<body>
<div style="width:100%; height: 300px; overflow: auto;">
<table cellspacing="0" cellpadding="2" style="width:100%;">
<thead>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</thead>
<tbody tabindex="0">
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Problem
In FireFox, when you click on a row, it puts focus onto the tbody, causing the containing div to produce a horizontal scrollbar which scrolls for 1 pixel.
Question
How can I prevent the horizontal scrolling showing up when the row is clicked? I could put
"overflow-x: hidden; overflow-y: auto;" on the containing div instead, but what if the div really does need to scroll horizontally? Does anyone know of a better way to handle this?