homepage Welcome to WebmasterWorld Guest from 54.205.197.66
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Table Columns Changing Widths
How can I lock them from expanding/contracting
Revata




msg:3923675
 4:30 am on Jun 1, 2009 (gmt 0)

I have a table with 5 columns and even though I've specified pixel values for their size, they keep resizing on each subsequent page depending on the data included in each one. The data is filled with a repeated PHP region and the code looks like this:


<table width="100%" border="0" class="productTable">
<tr>
<th width="220px">Title </th>
<th width="36px">Year</th>
<th width="122px">Role</th>
<th width="36px">Link</th>
<th width="36px">Play</th>
</tr>
<?php do { ?>
<tr>
<td width="220px"><?php echo $row_creditsList['title']; ?></td>
<td width="36px"><?php echo $row_creditsList['year']; ?></td>
<td width="122px"><?php echo $row_creditsList['role']; ?></td>
<td width="36px"><?php if ($row_creditsList['link'] != "") { echo "<a href={$row_creditsList['link']} target=\"_blank\">Link</a>";} ?></td>
<td width="36px"><?php if ($row_creditsList['flv'] != "") { echo "<a href=\"JavaScript:top.content.fplayer.player.sendEvent('LOAD', '{$row_creditsList['flv']}');top.content.fplayer.player.sendEvent('PLAY')\">Play</a>";} ?></td>

</tr>
<?php } while ($row_creditsList = mysql_fetch_assoc($creditsList)); ?>
</table>



 

swa66




msg:3923791
 10:03 am on Jun 1, 2009 (gmt 0)

You most likely create a conflict between the 100% width of the table itself and all the columns being fixed width. Hence the browser has no choice but to fix the conflict.

Revata




msg:3924863
 4:12 pm on Jun 2, 2009 (gmt 0)

I double checked and added up the column widths, the dont exceed any containing divs or boundaries. hmmm... if i just add a fixed width div to each cell would that do it?

swa66




msg:3924956
 6:09 pm on Jun 2, 2009 (gmt 0)

added up the column widths, the dont exceed any containing divs or boundaries

Is not the problem (would be overfow at worst), the problem is the table itself.

You set the table to 100% width -> that's fixed for the browser in a certain environment.
You then set all the columns to a fixed width, which in all likelihood will not add up to whatever that 100% has been calculated.

Hence the conflict for the browser it will resolve on it's own.

Solution: remove the 100% width on the table or remove the width on one of the columns.

choster




msg:3924994
 6:51 pm on Jun 2, 2009 (gmt 0)

When using HTML attributes instead of CSS to set widths, don't indicate units— you can only use pixels anyway, and some browsers may ignore the whole attribute value as junk if non-numerical characters are found. Mixing units and percentages can also spell trouble— not necessarily in this case necesarily, but it does make it harder to debug problems in more complex layouts.

<table width="550" border="0" class="productTable">
<thead>
<tr>
<th width="220">Title </th>
<th width="36">Year</th>
<th width="122">Role</th>
<th width="36">Link</th>
<th width="36">Play</th>
</tr>
</thead>
<tbody>
[etc.]

Revata




msg:3925031
 7:31 pm on Jun 2, 2009 (gmt 0)

great, thanks for your responses! I get confused where to use units and where not to sometimes. Still pretty green in web development.

swa66, I get what you're saying now. I've removed the 100% width and i've got the table behaving in a majority of browsers im testing, the only one being funny is Firefox. I noticed that the data in the year column contains values like:

2004-2008

which are rendered with page breaks after the dash in all browsers except FF. So I guess my options are: make the cell bigger or write breaks into these values manually, right?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved