Solved

Table Cell Widths

Posted on 2011-03-14
10
187 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
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 …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

751 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