adding css to Visual Editor

I am having a problem with css in TinyMCEAdvanced; hopefully someone can clarify what I should do.

I have created a child theme. One of the requirements is to create a large table in the Visual Editor. To do that I created a new Button in the TinyMCE toolbar. Pressing the button inserts a bunch of html. The various html elements have classes assigned to them, things like AP-table, AP-table-td, etc. This process works fine.

In the child theme folder I have created style.css which assigns the various styling properties to the classes in the html. When I create a page with the button-added html, the page displays correctly when viewed as the final page outside the editor. However, the table does not display correctly in the Visual Editor.

I have added the following code to child/functions.php in an attempt to get the editor to use my css:

function child_theme_add_editor_styles() {
    add_editor_style('style.css');		// add Child css
}
add_action( 'admin_init', 'child_theme_add_editor_styles' );

When I do this, the good news is that the html code now displays correctly in the Visual Editor.

The bad news is that all the usual formatting in the Visual Editor does not work. For example, a line marked as Heading 2 looks like normal text. When the page is viewed in the web site it looks fine. It is only wrong in the editor.

When the Visual Editor starts to edit an existing page, I see a brief flash where the formatted text shows correctly. Then the formatting goes away.

If I comment out the add_editor_style line above, then I get the correct formatting of text (of course, my table html then does not display correctly in the Visual Editor).

I do not understand why add_editor_style wipes out the normal formatting; I expected it to append my style.css, which only uses classes which I expect are unique.

Is there a way to have both formatting styles work in the Visual Editor? I assume I am doing something simple wrong.