0

http://jsfiddle.net/4GGxA/

* {
    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 углы у нее не скругляются?

1 ответ 1

1

http://jsfiddle.net/9NTSp/

Одновременно с паддингом меняете маргин.
Чтобы не было проблем со скруглением, есть предложение отказаться от таблиц в пользу блоков. Иначе придется скруглять углы ОТДЕЛЬНО для каждой "неправильной" ячейки.

1
  • 1
    Как все легко оказалось, спасибо большой!
    – andreyqin
    29 окт 2013 в 11:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.