Mouseover to reveal more data in a table
I have a table containing users like so:
download bmml source – Wireframes created with Balsamiq Mockups
In the system, users can associate multiple emails with their account. When the user mouses over a row, the row expands downwards to show all the emails registered. This is done with the CSS :hover selector:
As can be seen, this creates a pretty jarring effect and pushes the pagination widget and all content below it downwards. In addition, if ther user has moused over the last row, and wishes to click on one of the pagination buttons, she will try and aim for them, but once she mouses off the table row, the row contracts and the pagination widget shifts up, making her miss the buttons.
Are there anyways to improve the user experience for this? Is there a pattern I could use? I would like to make it as easy as possible for the user to show additional emails for a given user in the system.