How do i create a change in font size on hover without realigning other text?

Question

I want to use the hover pseudoclass in css to increase the size of individual links in a table, however every time they are hovered over, the size increase affects the size of the rows/columns and all the other links in the table move in accordance.

Any way i can prevent this using only css and html?

Answer 1

You can use CSS3 tranform to scale the links without causing re-positioning of surrounding elements, for example:

table a:hover{ -webkit-transform: scale(1.2); }

-webkit- can be changed for other vendors (e.g., -moz- and -ms-), but is not available in some browsers, including IE8.

Using line-height will not prevent horizontal movement, therefore expanding the column.

Answer 2

You can do this way:

Set the initial height to the line-height.

td {line-height: 20px; font-size: 14px;}
td:hover {font-size: 20px;}

Fiddle: http://jsfiddle.net/mMZjf/

Answer 3

Force the line-height height to be the same and change the font-size on hover.

Example here