Как сделать, чтобы при наведении на пункт меню и его изменении не сдвигались нижние пункты?

Question

[Владимир Голубь]

Вот код меню. При наведению меняю размер шрифта, получаеться строки ниже тоже меняют расположение. Как от этого избавиться.

<table>
                <tr>
                    <td><img src="images/blue.png"></td>
                    <td><a href="#">Заказы</a></td>
                </tr>
                <tr>
                    <td><img src="images/blue.png"></td>
                    <td><a href="#">Калькулятор<br>стоимости печати</a></td>
                </tr>
            </table>

table {
    border-spacing: 18px 47px;
}

a {
    text-decoration: none;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: black;
}

a:hover {
    font-size: 20px;
    font-weight: bold;
}

Answer 1

[Егор Федосенко]

Конечно, у вас реализовано очень плохим методом, Deodatuss дело говорит, по крайней мере стоит задуматься о том, что стоит это переделать.
Но если уж сильно хочется оставить все как есть, добавьте в CSS данный код, и ничего не должно скакать.

table tr td {
    vertical-align: top;
}

jsfiddle.net/vr6t6ky2

Answer 2

[Александр Миранович]

Вам нужно задать ячейки определенную высоту, и выравнивать относительно центра. Определитесь какой максимальной высоты может быть пункт, и ограничте ему высоту.
vertical-align: top; не решит вашу проблему в данном случае
jsfiddle.net/f48ZD/165