user1467883 user1467883 - 1 year ago 70
CSS Question

Fill up whole table space with table cells of equal width

The title is pretty self explanatory, but basically I need the table row to be equal to the table space provided and for the table cells to have equal widths. I have tried numerous suggestions online but I haven't been able to figure it out. Any help is greatly appreciated.

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 Source

Change #content #boxes table tr td to:

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

EDIT: Thanks Pumbaa, removed unnecessary directives

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download