"overflow: hidden" does not correctly overflow for elements with "white-space: nowrap" inside table columns. The expected behavior is for an element to clip to the viewport and not display the overflow. However, instead, it expands the viewport to be as large as the full element and adds a scrollbar to the window. I've put up a sample page which illustrates the problem. The sample correctly clips the first element to the viewport with hidden overflow in Firefox 2.0.0.3 and IE 7. <radr://problem/5093711> WebKit does not hide overflow for elements with "white-space: nowrap" in tables
Confirmed with a local debug build of WebKit r20544 with Safari 2.0.4 (419.3) on Mac OS X 10.4.9 (8P135).
A workaround is to set "display: block" on the table.
Sorry, the workaround is actually: "table, tbody, tr, td { display: block; }"
That workaround doesn't actually fix all cases. I have updated the reduced testcase to take out the table border spacing, so the boxes on the top and bottom can be directly compared (they should be identical).
Created attachment 13900 [details] Reduced testcase showing the behavior.
This is not a bug. The first part of the test case involves a table using auto layout mode. In this mode, the width of the table is determined by the width of the cell content. The width of the cell content must be calculated using a "shrink-to-fit" algorithm, since the normal algorithm depends on the width of the containing block being pre-determined. The shrink-to-fit algorithm never results in overflow. The second part of the test case does not use the shrink-to-fit width algorithm. Instead, its width is determined solely by the width of its containing block (the viewport), irrespective of its content. The calculated width ends up being less than the intrinsic width of the content, so overflow occurs. If you want to prevent this kind of "overflow" (actually just width ballooning) in a table, use the fixed table layout mode.