jquery - 我的 UL 放在 TD 中时没有响应

Question

我有一个名为 pgwslidemaster 的 jquery slider 。幻灯片本身是完全响应的。当我将它放在 table 的 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>

当我将它放入我的 td 时，它突然变得没有响应:

<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 替换它们。这完全解决了我的问题，现在页面会针对每个元素调整大小。