homepage Welcome to WebmasterWorld Guest from 54.145.172.149
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

5+ Year Member



 
Msg#: 3923673 posted 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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3923673 posted 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

5+ Year Member



 
Msg#: 3923673 posted 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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3923673 posted 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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3923673 posted 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

5+ Year Member



 
Msg#: 3923673 posted 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