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

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

Answer 2

我认为class col 中的问题（ style.css - 第4行）

.col {
   display: inline;
   overflow: hidden;
   float: left;
   position: relative;
}

将表格宽度设置为100％不会填充区域

2 个答案: