HTML Table width .

Question

It seems to me that I horribly missing something here but I can't get the cell of the following table to span across the whole table with. See following jsfiddle link attached:

http://jsfiddle.net/jeremysolarz/5stQc/2/

I know table design isn't nice but I'm working with a legacy application here with a lot of gif spacer images and I want to remove this and switch to a more CSS centered layout.

Please help.

Answer 1

Is it necessary to have a nested table in this case? If you just had a single table and used <th colspan="3"> would this solve the issue? Sorry if this is not the case but it seems like you are overcomplicating it!

Answer 2

You are currently declaring the width of the table inline(in the html) and in the CSS and both values are different, you should wrap the tables in a div as follows, and remove the inline width declaration.

/* frames */

#foo{ 
    width:100%;
    display: inline-block;
}
.newframeContainer {
    padding:0;
    margin:0 auto;
    text-align: left;
    width:70%;
    height: auto;
    border:none;
    -moz-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
        border: 1px solid #B6B6B6;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

The Html should now look like this:

<div id="foo">
<table height="100%" class="newframeContainer" cellspacing="1">
    <tbody>
        <tr height="27">
            <th colspan="3">
                ADAM Statistics
            </th>            
        </tr>
        <tr height="99%">
            <td class="text-bold">Total Project Budgets [USD] </td>
            <td>test</td>
            <td valign="top" align="right">
                192,609,012
            </td>
        </tr>
    <tbody>
</table>

</div>