html - 将表格宽度设置为 100% 不会填充区域

Question

我的表格有问题，我已在 CSS 中将宽度设置为 100%，但它似乎仍然不起作用。设置 <td>然而，宽度似乎有效。

这是 HTML:

<table id="events-table">
   <tr class="primary">
      <td>Event</td>
      <td>Acts</td>
      <td>Location</td>
      <td>Date</td>
   </tr>
   <tr>
      <td>Sample</td>
      <td>Sample Acts</td>
      <td>Sample Location</td>
      <td>Friday 16/06/12 22:00</td>
   </tr> 
   <tr>
      <td>Sample</td>
      <td>Sample Acts</td>
      <td>Sample Location</td>
      <td>Friday 16/06/12 22:00</td>
   </tr> 
</table>

这是 CSS:

table#events-table { width:100%; }
table#events-table td { padding:6px; }
table#events-table td:nth-child(1) { width:30%; }
table#events-table td:nth-child(2) { width:25%; }
table#events-table td:nth-child(3) { width:25%; }
table#events-table td:nth-child(4) { width:20%; }
table#events-table tr:nth-of-type(odd) { background:#222; }
table#events-table tr:nth-of-type(even) { background:#111; }
#events-table .primary { font-weight:bold; background:#000 !important; }

我相信它可能与我的样式表中的某些内容有冲突，但我无法理解它是什么。

Answer 1

从 class col 中删除 float:left 似乎可以解决这个问题。