Table Cell Spacing Issue |
Table Cell Spacing Issue |
ftbadolato |
Jul 31 2017, 05:21 PM
Post
#1
|
Novice Group: Members Posts: 25 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) |
pandy |
Jul 31 2017, 05:44 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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. |
ftbadolato |
Jul 31 2017, 05:57 PM
Post
#3
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
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 |
Jul 31 2017, 06:01 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
The crazy widths are still there.
|
ftbadolato |
Aug 3 2017, 03:28 PM
Post
#5
|
Novice Group: Members Posts: 25 Joined: 21-June 17 Member No.: 26,440 |
|
pandy |
Aug 3 2017, 06:10 PM
Post
#6
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Yup. I did.
|
Lo-Fi Version | Time is now: 19th April 2024 - 05:26 PM |