Solved

Table Cell Widths

Posted on 2011-03-14
10
184 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
  • 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

863 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now