# Table column resize

<!-- 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 [`TableColumnResize`](../../api/module_table_tablecolumnresize-TableColumnResize.md) plugin lets you resize tables and individual table columns. It gives you complete control over column width, whether you drag the column edge or enter an exact value, in percentages or pixels.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demo">

## Demo

To resize a column, simply hover your pointer over the column edge until it gets highlighted. Drag the column edge until you achieve the desired size.

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

The column resize feature is compatible with the [Export to Word](../converters/export-word.md) feature. The converter will respect the column width set in the editor and retain it in the created .DOCX file.

<a id="column-width-units">

## Column width units

By default, CKEditor 5 keeps table column widths as percentages, so the table and its columns scale with the available space. The feature also supports fixed widths expressed in pixels.

The table width is the single source of truth for the unit. When you set the table width in pixels through the [table and cell styling](tables-styling.md) tools, the column widths switch to pixels too. Switching the table width back to a percentage converts the columns accordingly. This keeps the whole table consistent, whether it should stretch with the surrounding layout or stay at a fixed size.

<a id="setting-an-exact-column-width">

## Setting an exact column width

Besides dragging the column edge, you can set a precise column width through the cell properties. Put the caret in a cell, open the cell properties, and enter the value in the **Width** field.

In a resized table, this width applies to the entire column the cell belongs to, rather than to the single cell. This lets you enter an exact value instead of approximating it by dragging.

<a id="installation">

## Installation

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

**NPM**

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

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

**CDN**

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

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

<a id="common-api">

## Common API

The [`TableColumnResize`](../../api/module_table_tablecolumnresize-TableColumnResize.md) plugin registers the `'tableColumnWidth'` command.

You can set the width of the columns covered by the current selection with the command below. A numeric value without a unit is treated as pixels:

```js
// Set the width of the selected column to 200 pixels.
editor.execute( 'tableColumnWidth', { value: '200' } );
```

In a resized table, the **Width** field of the [cell properties](tables-styling.md) uses this command to set the width of the whole column instead of a single cell.

> **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="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)