When creating a table in CKEditor (the Drupal text editing tool,) delete the default "500" width and replace with "100%".  Always use percentage (usually 100%.)  Never use a fixed px or pt size.  Once the table is created, if you drag to resize any row, column, or cell, the editor will insert fixed pixel width and height on all cells, but we want proportional sizes.  You can fix this by selecting a whole column of cells, right click and select Cell > Cell Properties.  You will see the size(s) in pixels.  Change the drop box for Width to percent and enter your percentage size.  Repeat for each column, keeping in mind that the total percentage widths of all the columns should add up to 100%.  Normally you would leave heights blank.

Next, switch to source view and add <div class="table-responsive-sm table-breakout-sm"> above your <table ...> and </div> after your </table>

Also add class="table table-sm" to your <table> tag so it looks similar to:

<table align="center" border="0" cellpadding="2" cellspacing="2" class="table table-sm" style="width: 100%;" summary="...">

This should make your table behave better on mobile.