css - Styling off after JQuery Append -

i have weird problem happens in browsers except firefox. show more button losses padding when ajax request , append data table...

on first load (non-ajax) button displays in browsers. when click show more button sends request more data (rows) back, button losses it's bottom padding.

if open chrome's or ie's development tool , click on

or tag element button brings padding. it's dom needs refresh or trigger padding shown.

<!-- 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 show more button -->  <script type="text/javascript">     $(function () {                $('#showdata').click(function () {              $.ajax({                 ...                 success: function (data) {                                             $('#table tbody').append(data.d.html);                 },             });              return false;         });     }); </script> 

returned data

the ajax call returns bunch of table rows. there no classes or id's on of returned html.

example of data returned call

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

try with:

#showdata {     display: block;     ... } 

an forgot close <p>:

<p><a id="showdata" href="#">show more</a></p> <!-- there! -->