CKEditor 5 table properties: keep cell spacing consistent after saving

An original inspection sheet has Part, Condition, and Action columns. The author adds generous cell padding, but the saved sheet returns to cramped cells. Before repeatedly applying padding, check whether the editor regards that value as the default and whether the reader supplies the same default style.

Expose both levels of styling

In a configured CKEditor application, import the table features it needs:

import {
  Table, TableToolbar, TableProperties, TableCellProperties
} from 'ckeditor5';

const inspectionTableOptions = {
  table: {
    contentToolbar: [
      'tableColumn', 'tableRow', 'mergeTableCells',
      'tableProperties', 'tableCellProperties'
    ],
    tableCellProperties: {
      defaultProperties: { padding: '8px' }
    }
  }
};

Add those imported plugins to the application's existing plugin array, keep insertTable in the main toolbar, and merge inspectionTableOptions.table with its existing table settings. Keep the installation's styles, license configuration, and unrelated controls. This is an integration fragment, not a complete editor installation.

Place the caret inside a table to reveal its contextual controls. Open Table properties when changing the table's width, alignment, or outer presentation. Open Cell properties when changing padding or the appearance of selected cells. A table-wide alignment choice does not mean the text inside every cell has changed alignment.

Match the default to the reader's stylesheet

CKEditor documents that configured default properties need corresponding content styles. A default is not a promise that every cell will contain an inline declaration with that value.

For the inspection sheet's eight-pixel default, include a corresponding rule in the editor content and the saved document's reader styles:

.ck-content .table table td,
.ck-content .table table th {
  padding: 8px;
}

This selector assumes the reader uses CKEditor's .ck-content wrapper and the table representation produced by its table feature. Adapt the scope to the actual reader markup. Inspect existing content styles too: a later, more specific rule can replace this padding.

Keep the two settings together when changing the application's default. Configuring padding: '8px' while styling reader cells at two pixels creates a disagreement between authoring controls and the final page. Copying only the editor's toolbar stylesheet will not resolve it.

Test a deliberate exception as well as the default

Create a development inspection sheet with these entries:

First leave its padding at the configured eight-pixel default. Save through the normal application route and inspect the reader. Then select the first data row's cells and apply twelve-pixel padding through Cell properties. Save again and compare those cells with the unchanged second row.

The first check catches a missing reader default. The second catches a transformation that strips explicit exceptions. Inspect editor.getData() and the final stored markup at the point where their results diverge. Do not decide that the editor lost a style merely because equivalent CSS is represented differently.

Cell background or border choices also need an actual visible outcome. A dark background with the previous dark text can make an otherwise correctly saved cell unreadable. Keep “Replace before use” as written text; color can reinforce the action but should not carry it alone.

Preserve structure while changing appearance

Table styling does not turn bold text into a proper header row or establish meaningful row associations. Keep the inspection sheet's Part, Condition, and Action headings as headers, and check the final narrow reader view for readable associations and wrapping.

The CKEditor source editing guide explains why unsupported markup can disappear during editing. For this styling problem, use the dedicated table features before adding broad HTML allowance rules. The document editor guide covers reading current editor data at Save.

Reopen the saved inspection sheet with the toolbar absent. Confirm that the inlet seal's instruction is legible, the default row keeps eight-pixel spacing, and the intentionally roomier row still differs. That distinguishes a working styling policy from a dialog that only looks correctly configured.