Pasting in nested tables that contains a font-size style results in a width of 100% being added

[timandella]

When pasting in a table, (with a nested table), a width style of 100% is being added to the nested table, causing it to expand to fill the parent cell. This seems to occur when a font-size style attribute is added. The "tableDefaultWidth" option is being set in Froala to "auto"

Expected behavior.

Nested table should not have the width style added,

Actual behavior.

Nested table is given a width of 100%, resulting in it expanding to fill the current cell

Steps to reproduce the problem.

This table, when pasted in (from a browser), has the nested table expanded

<table style='width: 780px;'>
	<tbody>
		<tr>
			<td>
				<table style="font-size: 10px;">
					<tbody>
						<tr><td>A</td><td>B</td><td>C</td><td>D</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>

This table, when pasted in, does not have the width style added

<table style='width: 780px;'>
	<tbody>
		<tr>
			<td>
				<table>
					<tbody>
						<tr>
							<td>A</td><td>B</td><td>C</td><td>D</td>
						</tr>
					</tbody>
				</table>
			</td>
		</tr>
	</tbody>
</table>

See https://jsfiddle.net/0yjns8x5/

Editor version.

Occurs in v4.2.0. Was previously working in v4.1.14

OS.

Linux

Browser.

Microsoft Edge

Recording.

Not a recording, but the previous js fiddle, using the html, shows the following:

Notes

Yes, embedded tables are a "bad thing", but the system involved has many legacy components, and the HTML it spews out isn't going to change anytime soon.

[Ethan25Irvine]

Im running into the same issue, were you able to figure out a solution to this?

[Ethan25Irvine]

The solution I figured out is when you are initializing the editor to create an event for html.set and loop through the html to find your tables with the width: 100% and remove the css.

events: {
                'html.set': function(){
                    this.$el.find('table').each(function () {
                        var currentWidth = $(this).attr('style');

                        // Check if the width is set to 100% in the style attribute
                        if (currentWidth && currentWidth.includes('width: 100%')) {
                            $(this).css('width', ''); // Remove the width style
                        }
                    });
                }
            }

[Ethan25Irvine]

The solution I figured out is when you are initializing the editor to create an event for html.set and loop through the html to find your tables with the width: 100% and remove the css.

events: {
                'html.set': function(){
                    this.$el.find('table').each(function () {
                        var currentWidth = $(this).attr('style');

                        // Check if the width is set to 100% in the style attribute
                        if (currentWidth && currentWidth.includes('width: 100%')) {
                            $(this).css('width', ''); // Remove the width style
                        }
                    });
                }
            }