Border on hover on table elements messing up standard width/height

Question

I have a table (a calendar) and have a CSS hover on each of the td elements. I'm putting a border on this hover, but it messes up the width and height of the cells (i.e. the new border will push the next row slightly further down, etc.)

Any ways around this?

Answer 1

You could (if the hover is not smoothed by transition) have a padding on the box (lets say 5px) and on the hover you could add 2px of border and make the padding 3px, so it would still be with the 5px distance from the end of the box.