Table Cell Widths
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..
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..
ASKER
Take a look and view the attached Snip in IE.
<table border="0" width="100">
<tr>
<td width="25"> </td>
<td width="25"> </td>
<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
<td width="25"> Test 01</td>
</tr>
<tr>
<td width="25"> </td>
<td width="75" colspan=3>
<table border="0" width="100%">
<tr>
<td width="25"> </td>
<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
<td width="25"> Test 03</td>
</tr>
<tr>
<td width="25"> </td>
<td width="25"> </td>
<td width="25"> </td>
</tr>
</table>
</td>
</tr>
</table>
the container for the second table is 75px so the width="100%" will be 75 pixels
and you can't fit 150px in 75px ..
and you can't fit 150px in 75px ..
my bad ..i didnt see there were two rows in the second table ..disregard my comment
by default tables have cellspacing 1
add cellspacing=0 and cellpadding=0 to each table
add cellspacing=0 and cellpadding=0 to each table
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="25"> </td>
<td width="25" style="background:red"> </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"> Test 01</td>
</tr>
<tr>
<td width="25"> </td>
<td width="75" colspan="3">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="25" style="background:green"> </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"> Test 03</td>
</tr>
<tr>
<td width="25"> </td>
<td width="25"> </td>
<td width="25"> </td>
</tr>
</table>
</td>
</tr>
</table>ASKER
I don't see that it solved the problem.
See my snap:
See my snap:
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 "
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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"> </td>
<td width="25"> </td>
<td width="25" align=center ><img border="0" src="Gray_W.gif" width="14" height="14"></td>
<td width="25"> Te</td>
</tr>
<tr>
<td width="25"> </td>
<td width="75" colspan=3>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="25"> </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;"> Test 01</div></td>
</tr>
<tr>
<td width="25"> </td>
<td width="25"> </td>
<td width="25"> </td>
</tr>
</table>
</td>
</tr>
</table>ASKER
Thanks for the help.
Sid.
Sid.
I think your issue maybe that some cells are of a defined width, but the content is stretching some of them.
GH