TBODY scrolls on focus in FireFox
HTML
<html>
<body>
<div style="width:100%; height: 300px; overflow: auto;">
<t开发者_Python百科able 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?If you want to prevent the dotted lines from showing up, try this:
<style>
table *:focus{
outline:0;
}
</style>
Good luck.
加载中,请稍侯......
精彩评论