td在元素右侧添加额外的边距或填充

在为我的老师分配任务时，我们正在制作一个表格，其中我希望每个td元素的宽度为200px，总计等于1000px（包装）的5个单元格。但是，当我这样做时，每个tr中的最后一个td会跳到下一行，因为它们都应该正确排列而没有问题。td在元素右侧添加额外的边距或填充

编辑：解决！（阅读评论）

这里是我的表码：

<table id="assignment-table"> 
     <tr> 
      <th>Assignment</th> 
      <th>Fall 2013</th> 
      <th>Responsive?</th> 
      <th>Winter 2014</th> 
      <th>Responsive?</th> 
     </tr> 

     <tr> 
      <td>A1</td> 
      <td>Code Provided Site</td> 
      <td>No</td> 
      <td>Designasaurus</td> 
      <td>Yes</td> 
     </tr> 

     <tr> 
      <td>A2a</td> 
      <td>Restaurant Mock-up</td> 
      <td>N/a</td> 
      <td>TBA</td> 
      <td>-</td> 
     </tr> 

     <tr> 
      <td>A2b</td> 
      <td>Restaurant Static</td> 
      <td>No</td> 
      <td>TBA</td> 
      <td>-</td> 
     </tr> 

     <tr> 
      <td>A3a</td> 
      <td>Adaptive Excercise</td> 
      <td>No</td> 
      <td>TBA</td> 
      <td>-</td> 
     </tr> 

     <tr> 
      <td>A3b</td> 
      <td>Responsive Excercise</td> 
      <td>Yes</td> 
      <td>TBA</td> 
      <td>-</td> 
     </tr> 

     <tr> 
      <td>A4</td> 
      <td>Restaurant Final</td> 
      <td>Yes</td> 
      <td>TBA</td> 
      <td>-</td> 
     </tr> 

     <tr> 
      <td>A5a</td> 
      <td>Final Mock-up</td> 
      <td>N/a</td> 
      <td>TBA</td> 
      <td>-</td> 
     </tr> 

     <tr> 
      <td>A5b</td> 
      <td>Final Site</td> 
      <td>Yes</td> 
      <td>TBA</td> 
      <td>-</td> 
     </tr> 

     <tr> 
      <td class="lastrow">NSCC GRAPHIC DESIGN | 2012-14</td> 
     </tr> 
    </table> 

</div>

然后是CSS：

#content { 
width: 100%; 
color: white; 
} 

#assignment-table { 
font-size: 16px; 
border-spacing: 0!important; 
border-collapse: collapse; 
} 

#assignment-table th { 
display: inline-block; 
padding: 25px 0; 
width: 200px; 
text-align: center; 
} 

#assignment-table tr { 
display: block; 
border-bottom: 1px solid #ffffff; 
} 

#assignment-table tr:last-child { 
width: 1000px; 
border-bottom: none!important; 
} 

#assignment-table td { 
display: inline-block; 
padding: 25px 0; 
width: 200px; 
text-align: center; 
} 

.lastrow { 
width: 1000px!important; 
} 

th:nth-child(3) { 
background-color: rgba(255,255,255,0.05); 
} 

td:nth-child(3) { 
background-color: rgba(255,255,255,0.05); 
font-family: 'source_sans_proitalic'; 
} 

th:nth-child(5) { 
background-color: rgba(255,255,255,0.05); 
} 

td:nth-child(5) { 
background-color: rgba(255,255,255,0.05); 
font-family: 'source_sans_proitalic'; 
}

它应该是这样的：

来源

2014-01-28 Astunda

它看起来像你的表格单元格上有display: inline-block;。 inline-block会自动在元素之间插入一个空格。正是这个空间加起来并包裹着你的最后一个元素。我会从你的css条目中删除display: inline-block;，因为这是一张表，它不需要它。

CSS：

#assignment-table th { 
    //display: inline-block; <- remove this 
    padding: 25px 0; 
    width: 200px; 
    text-align: center; 
} 

#assignment-table td { 
    //display: inline-block; <- remove this 
    padding: 25px 0; 
    width: 200px; 
    text-align: center; 
}

EXAMPLE FIDDLE

来源

2014-01-28 16:08:42 badAdviceGuy

感谢的人！它在删除显示后完美运行：inline-block;我也删除了桌面上的ID！ – Astunda