Solved

Table Cell Widths

Posted on 2011-03-14
10
189 Views
Last Modified: 2012-05-11
I want to have two tables, one above the other on the page.

I have the tables setup, and all the cells have the same with as the cell above it in the above table, but the cells never seem to line up correctly.  It seems like the cell width is dependent on the specified with and whether or not it is populated with a Bitmap or not.  I can almost get the cells to line up if the width of the empty cell, if the width is equal to the with of the other cell plus the width of the bitmap that it has in it.

Any help is appreciated..





0
Comment
Question by:sidwelle
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 11

Expert Comment

by:G_H
ID: 35133175
Can you show us some code?

I think your issue maybe that some cells are of a defined width, but the content is stretching some of them.

GH
0
 

Author Comment

by:sidwelle
ID: 35133553
Take a look and view the attached Snip in IE.


<table border="0" width="100">
			<tr>
				<td width="25">&nbsp;</td>
				<td width="25">&nbsp;</td>
				<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
				<td width="25">&nbsp;Test 01</td>
			</tr>
			<tr>
				<td width="25">&nbsp;</td>
				<td width="75" colspan=3>

					<table border="0" width="100%">
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
							<td width="25">&nbsp;Test 03</td>
						</tr>
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
						</tr>
					</table>
				
				</td>
			</tr>
		</table>

Open in new window

0
 
LVL 4

Expert Comment

by:dwkd
ID: 35133597
the container for the second table is 75px so the width="100%" will be 75 pixels
and you can't fit 150px in 75px ..
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 4

Expert Comment

by:dwkd
ID: 35133607
my bad ..i didnt see there were two rows in the second table ..disregard my comment
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35133759
by default tables have cellspacing 1
add cellspacing=0 and cellpadding=0 to each table
<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td width="25">&nbsp;</td>
				<td width="25" style="background:red">&nbsp;</td>
				<td width="25" style="background:brown" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
				<td width="25" style="background:orange">&nbsp;Test 01</td>
			</tr>
			<tr>
				<td width="25">&nbsp;</td>
				<td width="75" colspan="3">

					<table border="0" width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td width="25" style="background:green">&nbsp;</td>
							<td width="25" style="background:blue" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
							<td width="25" style="background:yellow">&nbsp;Test 03</td>
						</tr>
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
						</tr>
					</table>
				
				</td>
			</tr>
		</table>

Open in new window

0
 

Author Comment

by:sidwelle
ID: 35134896
I don't see that it solved the problem.

See my snap:
 Not linned up Not linned up
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35138542
well the word "Test" is a 26px word so the cell gets stretched of course to accomodate the word... just dont use Test .. use "T "
0
 
LVL 4

Accepted Solution

by:
dwkd earned 500 total points
ID: 35139575
just copy and paste my code above on your page and delete all the color stuff..
another i wanna point out to you is that your table in the sanpshot is 91px wide and your code contains 4 columns each 25px => so minimum you need 100px
0
 

Author Comment

by:sidwelle
ID: 35158342
Adding a "div" to the cell helps alot.  the attached code does what I want, just a little messy.

<table border="0" width="100" cellspacing="0" cellpadding="0">
			<tr>
				<td width="25">&nbsp;</td>
				<td width="25">&nbsp;</td>
				<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
				<td width="25">&nbsp;Te</td>
			</tr>
			<tr>
				<td width="25">&nbsp;</td>
				<td width="75" colspan=3>

					<table border="0" width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
							<td width="25" nowrap ><div nowrap style="width: 25px; overflow:hidden;">&nbsp;Test 01</div></td>
						</tr>
						<tr>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
							<td width="25">&nbsp;</td>
						</tr>
					</table>
				
				</td>
			</tr>
		</table>

Open in new window

0
 

Author Closing Comment

by:sidwelle
ID: 35241884
Thanks for the help.

Sid.
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

627 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question