# Table scrolling

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

The [`TableScroll`](../../api/module_table_tablescroll-TableScroll.md) plugin keeps wide tables usable. Whenever a table would be wider than the space available to it, the table scrolls horizontally inside its own frame instead of squeezing its columns down to an unreadable width or breaking out of the page layout.

<a id="demo">

## Demo

Try shrinking your browser window, or dragging the table below wider with the [column resize](tables-resize.md) handle – once the table no longer fits, it starts scrolling horizontally on its own. While dragging, the table’s edge snaps to exactly 100% of the available width and resists being dragged past it, making it easy to land on a table that fits its container exactly – a longer drag still lets it overflow on purpose.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## Installation

After [installing the editor](../../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list:

**NPM**

```js
import { ClassicEditor, Table, TableScroll } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Table, TableScroll, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Table, TableScroll } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Table, TableScroll, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Note**
>
> By default, this feature requires no configuration or additional UI – a **content** table starts and stops scrolling automatically, based on its own width and the space available to it. It works together with the [table and column resize](tables-resize.md) and [table caption](tables-caption.md) features. See [below](#configuring-which-tables-can-scroll) for how to also enable it for layout tables.

<a id="configuring-which-tables-can-scroll">

## Configuring which tables can scroll

By default, only **content** tables become scrollable when they overflow their container. **Layout** tables are excluded by default, since letting a layout table grow past its container can easily break the intended page layout – dragging its column resize handle stops at the container’s edge instead of overflowing it.

To also allow layout tables to scroll (and to be resized past the container width), add `'layout'` to [`config.table.tableScroll.tableTypes`](../../api/module_table_tableconfig-TableScrollConfig.md#member-tableTypes):

**NPM**

```js
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Table, TableScroll, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			tableScroll: {
				tableTypes: [ 'content', 'layout' ]
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Table, TableScroll, /* ... */ ],
		toolbar: [ 'insertTable', /* ... */ ],
		table: {
			tableScroll: {
				tableTypes: [ 'content', 'layout' ]
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

> **Note**
>
> A table nested inside another table never becomes scrollable, regardless of this configuration – scrolling only ever applies to a table sitting directly in the editing root.

<a id="common-api">

## Common API

The [`TableScroll`](../../api/module_table_tablescroll-TableScroll.md) plugin does not register any commands or UI components.

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

<a id="known-issues">

## Known issues

This feature only affects the editing view – a table only ever scrolls while you are editing it, it never scrolls in the actual document data. Because of that, it does not carry over to the [Export to Word](../converters/export-word.md) and [Export to PDF](../converters/export-pdf.md) features: an overflowing table is exported at its full, intended width, and appears exactly as it would with the scrolling feature disabled.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-table>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)