Table Columns Changing Widths

How can I lock them from expanding/contracting

[Revata]

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]

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]

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]

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]

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]

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?