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:
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.
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.
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:
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?