Table Cell Spacing Issue Options

[ftbadolato]

I am trying to display a very simple table on the screen and I can't get the cells to size properly. Here is my code:

CODE

<table border="1">
<tr>
<td style="width:45px; text-align:right"><img src="/img/unk-person.png" width="45"></td>
<td style="vertical-align:middle; width:1%; white-space:nowrap"><a href="clients.aspx?sec=2">Client Management</a></td>
<td style="width:45px; text-align:left"><img src="/img/Form.png" width="45"></td>
<td style="width:1%; vertical-align:middle; white-space:nowrap"><a href="ifbs.aspx?sec=4">Invitations for Bid (IFBs)</a></td>
<tr>
<tr>
<td style="width:45px; text-align:right; padding-top:5px"><img src="/img/lawn_mower.jpg" width="45"></td>
<td style="text-align:right; vertical-align:middle; width:1%; white-space:nowrap"><a href="vendors.aspx?sec=3">Vendor Management</a></td>
<td></td>
<td></td>
</tr>
</table>

The cells with the images won't tighten up to the size of the images, which is 45px. I don't get it...very frustrating. The table is stretching the entire width of the screen as well, which is also bothersome. See the attachment. If I specify the width, it aligns the table to the left, despite the cell that the table is within looking like this:

CODE

<td style="align-content:center; text-align:center"">

Any help is greatly appreciated!

[pandy]

Use a validator. The problem is caused by an extra TR.

CODE

<tr>
<tr>

Furthermore, the TDs don't need a width if you want them to be snug. Tables shrinkwrap to fit their content. The 1% width for the cells with links will screw the table up once it works. Why 1% and 1% of what? The table has no width, so it's up to the browser what to do with it, but I'm pretty sure it won't look nice and it will change the width of the image cells too. If you use % everything must add up to 100%. And 1 + 1 + 45px + 45px isn't 100%. If you just want the cells to fit their content leave width out altogether and use padding if you want to add some air to the mix.

[ftbadolato]

Good catch! I removed the TR issue, but still same rendering. Here is the code directly from the page source:

CODE

<table border="0" style="width:100%; align-content:center">
                <tr>
                    <td style="text-align:center"><span id="ctl00_ContentPlaceHolder1_lblMessage" style="font-weight:bold;">Welcome</span></td>
                </tr>
                <tr>
                    <td style="align-content:center; text-align:center">
                        <table border="1">
                        
                            <tr>
                                <td style="width:45px; text-align:right"><img src="/img/unk-person.png" width="45"></td>
                                <td style="vertical-align:middle; width:1%; white-space:nowrap"><a href="clients.aspx?sec=2">Client Management</a></td>
                                <td style="width:45px; text-align:left"><img src="/img/Form.png" width="45"></td>
                                <td style="width:1%; vertical-align:middle; white-space:nowrap"><a href="ifbs.aspx?sec=4">Invitations for Bid (IFBs)</a></td>
                            </tr>
                            <tr>
                                <td style="width:45px; text-align:right; padding-top:5px"><img src="/img/lawn_mower.jpg" width="45"></td>
                                <td style="text-align:right; vertical-align:middle; width:1%; white-space:nowrap"><a href="vendors.aspx?sec=3">Vendor Management</a></td>
                                <td></td>
                                <td></td>
                            </tr>
                          
                        
                        </table>
                    </td>
                </tr>
                <tr>
                    <td style="padding:20px"></td>
                </tr>
            </table>

[pandy]

The crazy widths are still there.

[ftbadolato]

The crazy widths are still there.

Yes...are you suggesting the widths are causing the issue?

[pandy]

Yup. I did.