Мой UL не реагирует, когда помещается в TD

Question

У меня есть ползунок jquery под названием pgwslidemaster. Слайд-шоу полностью реагирует самостоятельно. Когда я помещаю его в свой td таблицы, он становится невосприимчивым.

Вот мой код:

<div style="background-color:#e9e9e9; border-top-color:#FFF; border-top-style:solid; border-top-width:1px;"> 

    <center><div style="margin-top:10px; width:100%; margin-bottom:10px;"> 
    <ul class="pgwSlideshow"> 


    <li><img src="PgwSlideshow-master/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li> 
    <li><img src="PgwSlideshow-master/rio.jpg" alt="Rio de Janeiro, Brazil"></li> 
    <li><img src="PgwSlideshow-master/london.jpg" alt=""></li> 
    <li><img src="PgwSlideshow-master/new-york.jpg" alt=""></li> 
    <li><img src="PgwSlideshow-master/new-delhi.jpg" alt=""></li> 
    <li><img src="PgwSlideshow-master/paris.jpg" alt=""></li> 
    <li><img src="PgwSlideshow-master/sydney.jpg" alt=""></li> 



</ul> 
</div></center></div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="PgwSlideshow-master/pgwslideshow.js"></script> 
<script> 
$(document).ready(function() { 
    var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow(); 
    pgwSlideshow.stopSlide(); 

}); 
</script> 

, когда я положил его в мой ТД вдруг становится не реагирует:

<tr style="display:table-row"> 
    <td height="80" style="display:table-cell"><div id="wrapper-bottom"><span style="font-size:15px;"><img src="images/icon-info.png" width="29" height="29" align="left" style="margin-right:15px; margin-bottom: 15px;"/><span style="text-transform:uppercase; color: #E73227; font-weight: 700; font-size: 25px;">Property Name</span><br /> 
    Location: <span style="color:#666">Place</span></span></div></td> 
    </tr> 
    <tr> 
    <td align="left" style="" ><div style="background-color:#e9e9e9; border-top-color:#FFF; border-top-style:solid; border-top-width:1px;"> 

    <center><div style="margin-top:10px; width:100%; margin-bottom:10px;"> 
    <ul class="pgwSlideshow"> 


    <li><img src="PgwSlideshow-master/san-francisco.jpg" alt="San Francisco, USA" data-description="Golden Gate Bridge"></li> 
    <li><img src="PgwSlideshow-master/rio.jpg" alt="Rio de Janeiro, Brazil"></li> 
    <li><img src="PgwSlideshow-master/london.jpg" alt=""></li> 
    <li><img src="PgwSlideshow-master/new-york.jpg" alt=""></li> 
    <li><img src="PgwSlideshow-master/new-delhi.jpg" alt=""></li> 
    <li><img src="PgwSlideshow-master/paris.jpg" alt=""></li> 
    <li><img src="PgwSlideshow-master/sydney.jpg" alt=""></li> 



</ul> 
</div></center></div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="PgwSlideshow-master/pgwslideshow.js"></script> 
<script> 
$(document).ready(function() { 
    var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow(); 
    pgwSlideshow.stopSlide(); 

}); 
</script> 
</td> 
    </tr> 

Любые идеи, почему это происходит?

Answer 1

Я удалил все элементы таблицы и заменил их на div. Это полностью решило мою проблему, и страница теперь изменяет размеры для каждого элемента.