* {
margin: 0;
padding: 0;
}
body {
background: url('images/background.jpg') 50% 50% fixed;
}
#wrapper {
margin: 0px auto;
width: 850px;
}
button {
float: left;
margin: 0 5px 5px 20px;
cursor: pointer;
border: 1px;
border-radius: 2px;
}
button:hover {
padding: 1px;
}
#hidden {
clear: left;
}
table {
color: #666;
font-size: 16px;
border-collapse: collapse;
background: #fff;
width: 800px;
}
table td {
padding: 5px 20px;
border: 2px solid #bbb;
}
table td:hover {
background: #eee;
}
.info {
margin-top: 30px;
}
<div id="wrapper">
<div class="info">
<button id="add">+</button>
<button id="hidden">-</button>
<table>
<tr>
<td>Составление плана по выполнению задачи. Корректировка плана заказчиком по его письменной просьбе, или в случаях изменения им технического задания.' AS `Составление плана по выполнению задачи. Корректировка плана заказчиком по его письменной просьбе, или в случаях изменения им технического</td>
<td>150.00</td>
<td>10</td>
<td>1500.00</td>
</tr>
<tr>
<td colspan="4">Модерниза́ция компью́тера (апгрейд; upgrade) — обычно по отношению к персональному компьютеру — замена отдельных компонентов компьютера на более совершенные или мощные. Современные персональные компьютеры построены по модульной системе, что позволяет проводить модернизацию, и получать более производительный компьютер, сохраняя инвестиции.</td>
</tr>
</table>
</div>
</div>
Есть такая разметка со стилями. Проблема в том, что при наведении на кнопку "+" она увеличивается и таблица сдвигается вправо, хотя предполагается, что такого не должно быть. С кнопкой "-" все нормально. Их отличия в том, что кнопка "+" плавающая, но я все равно не знаю как исправить. PS. И еще - почему при задании border-radius: 5px для table углы у нее не скругляются?