Html Деформация таблицы

Семён Куликов

Как сделать так, чтобы при наведении курсором на ссылку "Заказать", таблица не деформировалась?
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<table>
<tr>
<th class="chose">Choose the pack</th>
<th>Standart</th>
<th>Gold</th>
<th>Premium</th>
</tr>
<tr>
<td class="chose">Основной</td>
<td><img src="img/yes.png" alt="yes"></td>
<td><img src="img/yes.png" alt="yes"></td>
<td><img src="img/yes.png" alt="yes"></td>
</tr>
<tr>
<td class="chose">Продвинутый</td>
<td><img src="img/no.png" alt="no"></td>
<td><img src="img/yes.png" alt="yes"></td>
<td><img src="img/yes.png" alt="yes"></td>
</tr>
<tr>
<td class="chose">VIP</td>
<td><img src="img/no.png" alt="no"></td>
<td><img src="img/no.png" alt="no"></td>
<td><img src="img/yes.png" alt="yes"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td><span>1500</span>руб.</td>
<td><span>2500</span>руб.</td>
<td><span>3500</span>руб.</td>
</tr>
<tr>
<td><a href="#">Заказать</a></td>
<td><a href="#">Заказать</a></td>
<td><a href="#">Заказать</a></td>
</tr>
</table>
</body>
</html>

Css:
body {
font: 14px/1.5 Arial, Verdana, Tahoma, sans-serif; }

span {
font-weight: bold; }

a {
text-decoration: none;
color: purple;
font-weight: 500; }
a:hover {
color: #000;
font-weight: 600; }

table {
width: 650px;
border: solid 1px #99f;
border-collapse: collapse;
color: #606060; }

.chose {
text-align: left;
padding-left: 10px; }

th {
background-color: #edeeee;
color: #9c9c9c; }

th, td {
border: solid 1px #99f;
text-align: center;
padding: 8px; }

2 чел.