TableLayout: sizes are not rounding correctly

[lixiaoyan]

Provide a general summary of the issue here

When a table has a non-integer width (for example, a percentage width based on the page size), TableLayout may round it up to a larger size, which can cause a horizontal scrollbar to appear.

🤔 Expected Behavior?

Table should not have horizontal scrollbar.

😯 Current Behavior

Table may be scrolled horizontally, even if overflow-x: clip is set.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://stackblitz.com/edit/dtqtnckm?file=src%2FExample.tsx

Screen.Recording.2026-01-08.at.1.54.09.PM.mov

Version

1.14.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for reporting, I can reproduce in our docs on our Virtualizer page. It seems to stem from this line

react-spectrum/packages/@react-aria/virtualizer/src/ScrollView.tsx

Line 173 in 245a703

let clientWidth = dom.clientWidth;

which measures a rounded integer width without the scrollbars. We'll have to find a way to get the true sub-pixel precision there instead.

Side note, I think we're missing a box-sizing: border-box; here

react-spectrum/starters/docs/src/Table.css

Line 18 in 245a703

padding: 0;

[lixiaoyan]

A workaround is to set width: round(down, 100%, 1px) on the Table component. Although its compatibility is not pretty good.