Missing line-shift when tables are aligned to the left

[jensen-lin]

Add a table
align table to left
Add a new table
align table to left
Expected: Tables are below each other same way as if the tables where aligned to center
Actual: Tables are aligned close up

EDIT: We have introduced non-float alignment for images - https://ckeditor.com/docs/ckeditor5/latest/features/images/images-styles.html#presentational-styles - we could introduce same type of extra alignment for tables.

[FilipTokarski]

Hi thanks for the report. I'll add some visuals here, so anyone reading this ticket doesn't need to reproduce this themselves.

Current state ( I'm using editor.execute( 'tableAlignment', { value: 'left' } ); ) :

0_table2.mp4

Expected state:

I'll convert this into a feature request, so please add 👍 to bumps its popularity.

[jswiderski]

We have introduced non-float alignment for images - https://ckeditor.com/docs/ckeditor5/latest/features/images/images-styles.html#presentational-styles - we could introduce same type of extra alignment for tables.

For those who can’t wait until this feature is ready simple plugin which overwrites default behaviour and instead of float styles, it uses margins just like the image plugin does: tableAlign.zip

In order to use this plugin you need to build CKEditor from source: https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/advanced-setup.html#scenario-2-building-from-source

In order to use the plugin in your code you need to set it up as follows:

import TableAlign from './_your_plugins_folder/tableAlign/tableAlign.js';

ClassicEditor.create( document.querySelector( '#editor' ), {
        plugins: [ ...,TableAlign, ...		],
...

NOTE: If you are using default alignment for tables, you will have to use matching styles as well e.g.
Table feature configuration

table: {
    tableProperties: {
	// The default styles for tables in the editor.
	// They should be synchronized with the content styles.
		defaultProperties: {
			alignment: 'left'
		}	
	}
}

Matching CSS styles for HTML page where editor is used

.ck-content .table {
	margin-left: 0 !important;
	margin-right: auto !important;
	display: table;
}