Table styles missing overflow:hidden causing horizontal scroll in v47
📝 Provide detailed reproduction steps (if any)
- Create an inline editor instance with CKEditor 5 v47.2.0
- Insert a table with multiple columns into the content
- Place the editor in a container narrower than the table's natural width
- Observe the editor area
✔️ Expected result
The table should be constrained within its container without causing horizontal scrollbars. The table should have overflow: hidden to prevent content overflow, as it did in v45.2.
❌ Actual result
Tables — with ck5 tools active — cause horizontal scrollbars to appear on the container. The table content overflows its boundaries.
Diff
❓ Possible solution
In CKEditor 5 v45.2, table styles included overflow: hidden:
.ck-content .table table {
overflow: hidden; /* ← This prevented overflow */
width: 100%;
/* ... other properties ... */
}
In CKEditor 5 v47.2.0, the table styles changed to:
.ck-content figure.table:not(.layout-table) > table {
width: 100%;
height: 100%;
/* ← Missing overflow: hidden */
}
Solution: Add overflow: hidden back to the table styles to prevent horizontal overflow.
📃 Other details
- Browser: Chrome Test Browser in Selenium (observed in inline editor)
- OS: Ubuntu
- CKEditor version with issue: v47.2.0
- Installed CKEditor plugins: Standard build with table plugin
n.b. when viewing in MacOS or iOS the scrollbar is not immediately obviousy due to Mac scrollbars only showing on hover, but it is reproducible there too.
Additional context
This issue is particularly noticeable when using the inline editor on frontend pages where content containers may have constrained widths. The removal of overflow: hidden breaks the table's containment behavior.
The issue affects both:
- Editor inline styles (bundled in dist/ckeditor.js)
- Extracted content styles (ckeditor5-content.css)
Related to our previous report about content styles: #19414
If you'd like to see this fixed sooner, add a 👍 reaction to this post.
Unfortunately, I cannot pinpoint it, here are content-styles from v45.2, and no overflow for tables as well.
UPDATE: I think the change is in v44 -> v45. And this PR: #18295. AFAIR overflow:hidden was a hack for column resize, which we replaced with a more bulletproof solution. I'm not sure if we wish to revert it, cc @niegowski @pszczesniak
Unfortunately, I cannot pinpoint it, here are content-styles from v45.2, and no overflow for tables as well.
UPDATE: I think the change is in v44 -> v45. And this PR: #18295. AFAIR
overflow:hiddenwas a hack for column resize, which we replaced with a more bulletproof solution. I'm not sure if we wish to revert it, cc @niegowski @pszczesniak
I also recall that it caused some other issues and we removed it on purpose.