The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Table Cell Spacing Issue
ftbadolato
post Jul 31 2017, 05:21 PM
Post #1





Group: Members
Posts: 6
Joined: 21-June 17
Member No.: 26,440



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!


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 31 2017, 05:44 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
Joined: 9-August 06
Member No.: 6



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

QUOTE

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Jul 31 2017, 05:57 PM
Post #3





Group: Members
Posts: 6
Joined: 21-June 17
Member No.: 26,440



Good catch! smile.gif 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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 31 2017, 06:01 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
Joined: 9-August 06
Member No.: 6



The crazy widths are still there.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
ftbadolato
post Aug 3 2017, 03:28 PM
Post #5





Group: Members
Posts: 6
Joined: 21-June 17
Member No.: 26,440



QUOTE(pandy @ Jul 31 2017, 07:01 PM) *

The crazy widths are still there.


Yes...are you suggesting the widths are causing the issue?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 3 2017, 06:10 PM
Post #6


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,662
Joined: 9-August 06
Member No.: 6



Yup. I did.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 20th September 2017 - 06:44 PM