Fix broken resizing of nested tables.

.changelog/20260115142632_ck_19609.md

@@ -0,0 +1,9 @@
+---
+type: Fix
+scope:
+  - ckeditor5-table
+closes:
+  - https://github.com/ckeditor/ckeditor5/issues/19609
+---
+
+Fixed an issue where resizing columns in a nested table could break the parent table layout.

packages/ckeditor5-table/src/tablecolumnresize/tablecolumnresizeediting.ts

@@ -77,14 +77,17 @@ type ResizingData = {
 		viewColgroup: ViewElement;
 		viewLeftColumn: ViewElement;
 		viewRightColumn?: ViewElement;
+		viewColumns: Array<ViewElement>;
 	};
 	widths: {
 		viewFigureParentWidth: number;
 		viewFigureWidth: number;
 		tableWidth: number;
 		leftColumnWidth: number;
 		rightColumnWidth?: number;
+		allColumnWidths: Array<number>;
 	};
+	leftColumnIndex: number;
 };
 
 /**
@@ -765,14 +768,17 @@ export class TableColumnResizeEditing extends Plugin {
 				viewFigure,
 				viewLeftColumn,
 				viewRightColumn,
-				viewResizer
+				viewResizer,
+				viewColumns
 			},
 			widths: {
 				viewFigureParentWidth,
 				tableWidth,
 				leftColumnWidth,
-				rightColumnWidth
-			}
+				rightColumnWidth,
+				allColumnWidths
+			},
+			leftColumnIndex
 		} = this._resizingData!;
 
 		const dxLowerBound = -leftColumnWidth + COLUMN_MIN_WIDTH_IN_PIXELS;
@@ -797,15 +803,27 @@ export class TableColumnResizeEditing extends Plugin {
 		}
 
 		this.editor.editing.view.change( writer => {
-			const leftColumnWidthAsPercentage = toPrecision( ( leftColumnWidth + dx ) * 100 / tableWidth );
-
-			writer.setStyle( 'width', `${ leftColumnWidthAsPercentage }%`, viewLeftColumn );
-
 			if ( isRightEdge ) {
-				const tableWidthAsPercentage = toPrecision( ( tableWidth + dx ) * 100 / viewFigureParentWidth );
+				const newTableWidth = tableWidth + dx;
+				const tableWidthAsPercentage = toPrecision( newTableWidth * 100 / viewFigureParentWidth );
 
 				writer.setStyle( 'width', `${ tableWidthAsPercentage }%`, viewFigure );
+
+				for ( let i = 0; i < allColumnWidths.length; i++ ) {
+					let columnWidth = allColumnWidths[ i ];
+
+					if ( i === leftColumnIndex ) {
+						columnWidth += dx;
+					}
+
+					const columnWidthAsPercentage = toPrecision( columnWidth * 100 / newTableWidth );
+					writer.setStyle( 'width', `${ columnWidthAsPercentage }%`, viewColumns[ i ] );
+				}
 			} else {
+				const leftColumnWidthAsPercentage = toPrecision( ( leftColumnWidth + dx ) * 100 / tableWidth );
+
+				writer.setStyle( 'width', `${ leftColumnWidthAsPercentage }%`, viewLeftColumn );
+
 				const rightColumnWidthAsPercentage = toPrecision( ( rightColumnWidth! - dx ) * 100 / tableWidth );
 
 				writer.setStyle( 'width', `${ rightColumnWidthAsPercentage }%`, viewRightColumn! );
@@ -941,6 +959,7 @@ export class TableColumnResizeEditing extends Plugin {
 		const viewFigure = viewTable.findAncestor( 'figure' ) as ViewElement;
 		const viewColgroup = [ ...viewTable.getChildren() as IterableIterator<ViewElement> ]
 			.find( viewCol => viewCol.is( 'element', 'colgroup' ) )!;
+		const viewColumns = Array.from( viewColgroup.getChildren() ) as Array<ViewElement>;
 		const viewLeftColumn = viewColgroup.getChild( leftColumnIndex ) as ViewElement;
 		const viewRightColumn = isRightEdge ? undefined : viewColgroup.getChild( leftColumnIndex + 1 ) as ViewElement;
 
@@ -965,15 +984,18 @@ export class TableColumnResizeEditing extends Plugin {
 				viewFigure,
 				viewColgroup,
 				viewLeftColumn,
-				viewRightColumn
+				viewRightColumn,
+				viewColumns
 			},
 			widths: {
 				viewFigureParentWidth,
 				viewFigureWidth,
 				tableWidth,
 				leftColumnWidth,
-				rightColumnWidth
-			}
+				rightColumnWidth,
+				allColumnWidths: columnWidths
+			},
+			leftColumnIndex
 		};
 	}
 

packages/ckeditor5-table/tests/tablecolumnresize/tablecolumnresizeediting.js

@@ -56,7 +56,7 @@ import { Rect } from '@ckeditor/ckeditor5-utils';
 describe( 'TableColumnResizeEditing', () => {
 	let model, editor, view, editorElement, contentDirection, resizePlugin;
 	const PERCENTAGE_PRECISION = 0.001;
-	const PIXEL_PRECISION = 1;
+	const PIXEL_PRECISION = 6;
 
 	beforeEach( async () => {
 		editorElement = document.createElement( 'div' );
@@ -1799,6 +1799,57 @@ describe( 'TableColumnResizeEditing', () => {
 			} );
 
 			describe( 'nested table ', () => {
+				it( 'should produce correct column widths that sum up to 100% when resizing nested table', () => {
+					// Test-specific.
+					const columnToResizeIndex = 2;
+					const mouseMovementVector = { x: 20, y: 0 };
+
+					_setModelData( editor.model,
+						'<table tableWidth="100%">' +
+							'<tableRow>' +
+								'<tableCell>' +
+									'[<table tableWidth="30%">' +
+										'<tableRow>' +
+											'<tableCell>' +
+												'<paragraph>foo</paragraph>' +
+											'</tableCell>' +
+											'<tableCell>' +
+												'<paragraph>bar</paragraph>' +
+											'</tableCell>' +
+											'<tableCell>' +
+												'<paragraph>baz</paragraph>' +
+											'</tableCell>' +
+										'</tableRow>' +
+										'<tableColumnGroup>' +
+											'<tableColumn columnWidth="25%"></tableColumn>' +
+											'<tableColumn columnWidth="25%"></tableColumn>' +
+											'<tableColumn columnWidth="50%"></tableColumn>' +
+										'</tableColumnGroup>' +
+									'</table>]' +
+								'</tableCell>' +
+							'</tableRow>' +
+							'<tableColumnGroup>' +
+								'<tableColumn columnWidth="100%"></tableColumn>' +
+							'</tableColumnGroup>' +
+						'</table>'
+					);
+
+					const domNestedTable = getDomTable( view ).querySelectorAll( 'table' )[ 1 ];
+					const viewNestedTable = view.document.selection.getSelectedElement().getChild( 1 );
+
+					setInitialWidthsInPx( editor, viewNestedTable, null, 800 );
+
+					const domResizer = getDomResizer( domNestedTable, columnToResizeIndex, 0 );
+
+					tableColumnResizeMouseSimulator.down( editor, domResizer, {} );
+					tableColumnResizeMouseSimulator.move( editor, domResizer, mouseMovementVector );
+
+					const finalViewColumnWidthsPc = getViewColumnWidthsPc( viewNestedTable );
+					const widthsSum = finalViewColumnWidthsPc.reduce( ( sum, width ) => sum + Number.parseInt( width, 10 ), 0 );
+
+					expect( widthsSum ).to.be.closeTo( 100, 1 );
+				} );
+
 				it( 'correctly shrinks when the last column is dragged to the left', () => {
 					// Test-specific.
 					const columnToResizeIndex = 1;
@@ -1963,8 +2014,8 @@ describe( 'TableColumnResizeEditing', () => {
 												'</tableCell>' +
 											'</tableRow>' +
 											'<tableColumnGroup>' +
-												'<tableColumn columnWidth="45\\.45%"></tableColumn>' +
-												'<tableColumn columnWidth="54\\.55%"></tableColumn>' +
+												'<tableColumn columnWidth="45\\.[\\d]+%"></tableColumn>' +
+												'<tableColumn columnWidth="54\\.[\\d]+%"></tableColumn>' +
 											'</tableColumnGroup>' +
 										'</table>' +
 									'</tableCell>' +

packages/ckeditor5-table/theme/tablecolumnresize.css

@@ -12,10 +12,6 @@
 	--ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
 }
 
-.ck-content .table .ck-table-resized {
-	table-layout: fixed;
-}
-
 .ck-content .table td,
 .ck-content .table th {
 	/* To prevent text overflowing beyond its cell when columns are resized by resize handler