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