table problem

horizontal scrollbar

[wceend]

Hi,
I made a table for a resultlist.
the table has 3 rows and 6 columns.
I merged < td colspan="6"> the 5th row in one cell because I need the complete width for a banner.

The first column of the table should be as small as the content inside it. (e.g. a column with thumbnails)

Therefore all the td's of the first column have a style = width:1%;" All the other td's have no width specified. (so they should scale automaticly)

This table exists in a simple 2-column layout (left column = content and right column = navigation)

The problem:
When I put an image (banner 580 * 60 pixels) in the merged cells. This will result in a horizontal browser scrollbar when I look at a resolution 800 * 600 pixels... :( While this banner should't be to large for the layout.

The following HTML code I used:

----------------------------------------

<table cellspacing="0">
<tr>
<td>
<table border="1" cellspacing="0" >
<tr>
<td class="min"><img src="" width="80" height="53" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6" ><img src="" width="580" height="60" border="1" /></td>
</tr>
<tr>
<td class="min" /><img src="" width="80" height="53" ></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td><img src="" width="120" height="400" /></td>
</tr>
</table>

[wceend]

I forgot the class:

td.min {
white-space: nowrap;
width: 1%;
}

Jonathan

[tedster]

I see what you're struggling with here.

Explorer gives each of your 5 results cells 116 px width as is, and continues that way no matter what width constraints I add into the rules. The Explorer table rendering algorithm is not very cooperative here - I've tried lots of width rules in various table and td elements, and it just won't go smaller.

Some comments

1. At 800x600 resolution, the actual available screen width may be as small as 744 pixels, depending on operating system and browser.

2. Add in body padding, table borders plusand cellpadding and you're close to the line. If any of your results cells stretch just a bit beyond 100px (and that's possible, depending on the browser's line break algorithm)

This may work out OK in Mozilla or Opera, but as we see, things are not OK in Explorer. I played with it for a while and I'm stumped, sorry to say.

[SuzyUK]

Explaining this has had me stumped for a while too.. I've seen it before, but usually in relation to table layouts and couldn't explain how to workaround.. my tables were too rusty.

This is related to a question in this thread [webmasterworld.com] and IE's rendering of tables. It can be fixed the same way, but you must specify an explicit width of the first column (1% will no longer do), which is possibly what you were hoping the rendering would take care of? It just needs to be wide enough to accommodate your widest thumbnail, so not impossible to do..

<table cellspacing="0">
<tr>
<td>
<table border="1" cellspacing="0" width="580" style="table-layout: fixed;">
<colgroup>
<col width="80" />
<col span="5" width="*" />
</colgroup>
<tr>
<td><img src="" width="80" height="53" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="6" ><img src="" width="580" height="60" border="1" /></td>
</tr>
<tr>
<td><img src="" width="80" height="53" ></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
<td><img src="" width="120" height="400" /></td>
</tr>
</table>

also you can still use CSS with the <col> element so the width can be altered from within your one CSS file if required

.thumbs {width: 80px;} and <col class="thumbs" />

possibly stricter but better than we're used to table rendering from IE? In the recs it has this to say about the "auto layout model [w3.org]" )(17.5.2)

This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

perhaps "inefficient" suggests we can no longer rely on an "auto layout" to do our counting for us?

Suzy