요소 오른쪽에 여백을 추가하거나 패딩을 추가합니다.

Question

선생님을위한 과제에서 각 td 요소의 너비가 200px이고 1000px (래퍼)에 해당하는 총 5 개의 셀이 필요한 표를 만듭니다. 그러나이 작업을 수행 할 때 각 tr의 마지막 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'; 
} 

그것은 다음과 같아야합니다

여기

테이블 내 코드입니다 (주석 읽기)

Answer 1

테이블 셀에 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

Answer 2

에 display: inline-block을 사용하여 기본 표 동작을 제거합니다. 그냥 테이블에 width: 1000px 및 td { width: 20%; }

편집을 적용 가고here을.