Scrolling table issue in all browsers.

[jlizarraga]

Hi all,

I'm having an issue with a table that happens in FF2, IE6, Opera and Safari, so I'm assuming it's something fixable and I'm just in the dark. Demo links are toward the bottom.

I'm making a column-based table for comparing cars. The table's containing div has a fixed width and "overflow-x: scroll;", so that if the results (columns) returned by the server exceed the width of the table, the user can scroll horizontally to see the other columns.

Problem is, when the table is long enough to trigger the scrolling, the table cells shrink in width by 10 pixels. The cells in this case have a margin and padding of 0 with a fixed width. Check it out:

3 cells/columns, displays as it should:

http://www.autofusion.com/development/jwsinv/v0.3/compare_test.html

6 cells/columns, each cell looses 10px in width:

http://www.autofusion.com/development/jwsinv/v0.3/compare_template.html

Any ideas? I'm using unencoded ampersands and some star hacks that haven't been added to the IE6-only CSS yet, so these test pages won't validate, but all the browsers show the same issue so I don't think that's the problem.

Thanks a ton for any insight on this. Tough one to Google. :\

[bluewalrus]

maybe something like this in matchmaker.css (I think)


#compare_RowPhotos td img {
margin: 13px ;
border: 5px #ffffff solid;
width: 185px;
}

[jlizarraga]

Thanks for the response, it led me to the answer.

I had to have a right margin on the image. But I still don't understand why a fixed width on table cells suddenly fails in all browsers when the table exceeds the width of its container. There must be something in the spec that spells this behavior out, but it seems like a very undesirable one.