ckeditor5 icon indicating copy to clipboard operation
ckeditor5 copied to clipboard

Table styles missing overflow:hidden causing horizontal scroll in v47

Open jjroelofs opened this issue 1 month ago • 1 comments

📝 Provide detailed reproduction steps (if any)

  1. Create an inline editor instance with CKEditor 5 v47.2.0
  2. Insert a table with multiple columns into the content
  3. Place the editor in a container narrower than the table's natural width
  4. 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.

Image

❌ Actual result

Tables — with ck5 tools active — cause horizontal scrollbars to appear on the container. The table content overflows its boundaries.

Image

Diff

Image

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

jjroelofs avatar Nov 25 '25 13:11 jjroelofs

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

Witoso avatar Nov 25 '25 18:11 Witoso

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

I also recall that it caused some other issues and we removed it on purpose.

Reinmar avatar Dec 18 '25 23:12 Reinmar