Solved

Table Cell Widths

Posted on 2011-03-14
10
183 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

707 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

16 Experts available now in Live!

Get 1:1 Help Now