Bug 13213 – "overflow: hidden" does not correctly overflow for elements with "white-space: nowrap" in tables

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Lucas Newman]

"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

[David Kilzer (:ddkilzer)]

Confirmed with a local debug build of WebKit r20544 with Safari 2.0.4 (419.3) on Mac OS X 10.4.9 (8P135).

[Lucas Newman]

A workaround is to set "display: block" on the table.

[Lucas Newman]

Sorry, the workaround is actually: "table, tbody, tr, td { display: block; }"

[Lucas Newman]

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).

[Lucas Newman]

Created attachment 13900 [details]
Reduced testcase showing the behavior.

[Maxwell Terpstra]

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.

[Ahmad Saleem]

I am getting same rendering across Safari 17.4.1, Chrome Canary 125 and Firefox Nightly 126, I think we can mark this as 'RESOLVED CONFIGURATION CHANGED'.

@Karl - any input?

[Karl Dubost]

confirmed.