동일한 너비의 테이블 셀로 전체 테이블 공간 채우기

Question

제목은 꽤 자명하지만 기본적으로 제공된 테이블 공간과 같고 테이블 셀의 너비는 동일해야합니다. 나는 수많은 제안을 온라인으로 시도했지만 나는 그것을 파악할 수 없었다. 어떤 도움이라도 대단히 감사합니다.

HTML :

<div id="content"> 
<div id="boxes"> 
    <table> 
     <tr> 
      <td> 
       <h2>News</h2> 

       <h6>The new website is up!</h6> 
       <p>The new website is up take a look around and be sure to visit our games page and have a good time. =)</p> 
      </td> 
      <td> 
       <h2>Other Stuff</h2> 

       <h6>This is where some other info goes</h6> 
       <p>We can type other types of information in here for the general public to know.</p> 
      </td> 
      <td>test</td> 
      <td>test</td> 
     </tr> 
    </table> 
</div><!--end boxes--> 
</div><!--end content--> 

CSS :

#content{ 
text-align:center; 
width:90%; 
margin-left:auto; 
margin-right:auto; 
} 
#content #boxes table{ 
table-layout:fixed; 
} 
#content #boxes table tr td{ 
border-top:30px solid #000; 
border-left:1px solid #000; 
border-right:1px solid #000; 
height:250px; 
width:23%; 
table-layout:fixed; 
text-align:left; 
float:left; 
display:inline-block; 
} 
#content #boxes table tr td:hover{ 
border-top:30px solid #F00; 
border-left:1px solid #F00; 
border-right:1px solid #F00;  
} 

Answer 1

변경 #content #boxes table tr td에 :

border-top:30px solid #000; 
border-left:1px solid #000; 
border-right:1px solid #000; 
border-collapse:collapse; 
height:250px; 
width:25%; 
text-align:left; 

Fiddle

편집 : 감사합니다 품바 제거 unnecess ary 지시어