html - 表不收缩

Question

请看这个视频，它解释了我的问题: http://www.youtube.com/watch?v=Zeq_BZ5QgCg

这是一个简单的表格。当我调整页面大小时，表格随页面大小调整到某个点，但随后停止。

我不知道为什么表格会这样。我希望它像页面的其余部分一样收缩。

您看到的黑线来自设置为“clear:both”的 div 容器。

表格的html代码:

<table class="tborder" cellpadding="6" cellspacing="0" border="1" align="center" id="videoevent">
<tbody>
<tr>
 <td class="thead" align="center" valign="middle" style="vertical-align:center">
  Headline
 </td>

 </tr><tr>

 <td class="alt2" align="center" style="padding:10px;">

  <div class="right" style="margin:5px 0px 10px 0px"><span id="user_online_count">refreshing...</span> persons are viewing this page</div>

  <div class="left" style="margin:5px 0px 10px 0px">OVERVIEW</div>

  <div class="c"></div>


  <div class="overviewcontainer" style="margin-right:10px;">
  <a href="./?room=1">
   <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
   <span class="img-headline">Jade</span>
   <span class="offline_indicator" id="oi_model_1">offline</span>  
  </a>

  </div><div class="overviewcontainer" style="margin-right:10px;">
  <a href="./?room=2">
   <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
   <span class="img-headline">User</span>
   <span class="offline_indicator" id="oi_model_2">offline</span>
  </a>

  </div><div class="overviewcontainer" style="margin-right:10px;">
  <a href="./?room=3">
   <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
   <span class="img-headline">User</span>
   <span class="offline_indicator" id="oi_model_3">offline</span>  
  </a>

  </div><div class="overviewcontainer" style="margin-right:10px;">
  <a href="./?room=4">
   <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
   <span class="img-headline">XXX</span>
   <span class="offline_indicator" id="oi_model_4">offline</span>
  </a>

  </div><div class="overviewcontainer" style="margin-right:10px;">
  <a href="./?room=5">
   <img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
   <span class="img-headline">admin</span>
   <span class="offline_indicator" id="oi_model_5">offline</span>
  </a>

 </div>

 <div class="c"></div>

</td>
</tr>
<tr>
<td colspan="2">
 Viewers: <span id="users_in_chat">waiting for refresh</span>

</td>
</tr>
</tbody>
</table>

我在表格的样式中看不到任何可能导致此行为的内容:

td[align=center] {
text-align: -webkit-center;
}
td[valign=middle] {
vertical-align: middle;
}
element.style {
}
.thead {
background: #CA1B03;
color: white;
font: normal normal bold 11px/normal tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
td, th, p, li {
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
/*user agent stylesheet*/
td, th {
display: table-cell;
vertical-align: inherit;
}
Inherited from table#videoevent.tborder
.tborder {
color: black;
}
/*user agent stylesheet*/
table {
border-spacing: 2px 2px;
border-collapse: separate;
}
/*Inherited from div.dynwrap.page*/
Style Attribute {
text-align: left;
}
.page {
color: black;
}
/*Inherited from body*/
body {
color: black;
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

Answer 1

可能是因为 td 元素中有一些 nowrap 元素或固定宽度的元素？视频、图片或 style="white-space: nowrap;"?