Стилизация после JQuery Append

Question

У меня странная проблема, которая возникает во всех браузерах, кроме Firefox.Кнопка «Показать больше» теряет свои отступы, когда я выполняю запрос ajax и добавляю данные в таблицу ...

При первой загрузке (не-ajax) кнопка отображается правильно во всех браузерах.Когда я нажимаю кнопку «Показать больше», которая отправляет запрос на получение большего количества данных (строк), кнопка теряет свой нижний отступ.

Если я открою инструмент разработки Chrome или IE и нажму на

или элемент тега для кнопки, она возвращает отступы.Это почти как если бы DOM нужно было обновить или что-то еще, чтобы вызвать отображение заполнения.

<!-- Html table -->
<div class="cont">
        <table id="table">
            <tbody>
                <tr>
                    <td>Record Data</td>
                </tr>
            </tbody>
        </table>
        <p><a id="showData"href="#">Show More</a></p>     
     </div> 

<!-- CSS -->
    #table { position: relative; width: 800px; height: 470px; overflow-y: scroll; padding: 10px;  }
    #showData { display: block; padding-top: 10px; }


 <!-- Event handler for Show more button -->
 <script type="text/javascript">
    $(function () {       
        $('#showData').click(function () {

            $.ajax({
                ...
                success: function (data) {                        
                    $('#table tbody').append(data.d.Html);
                },
            });

            return false;
        });
    });
</script>

Возвращенные данные

Вызов ajax просто возвращает кучу таблицстрок.Ни в одном из возвращенных html нет классов или идентификаторов.

пример данных, возвращаемых при вызове

<tr>
<td>some returned data 1</td>
</tr>
 <tr>
<td>some returned data 2</td>
</tr>
<tr>
<td>some returned data 3</td>
</tr>

Answer 1

"кнопка теряет нижний отступ" ...

В вашем CSS padding-bottom установлено на 0px. Попробуйте увеличить это? Или удалите его, чтобы оно не переписывало подразумеваемый 10px из padding, который непосредственно предшествует ему.

#showData { display: block; padding: 10px; padding-bottom: 0px; }

Answer 2

Попробуйте:

#showData {
    display: block;
    ...
}

Если вы забыли закрыть <p>:

<p><a id="showData" href="#">Show More</a></p> <!-- there! -->