Add a wrapper to make tables "responsive"

Description of the need

Using CKEditor or not, it's possible to add tables to a textarea (if the filter allows it). It's not hard to make a table not responsive this way, but hard to fix that. Looking online there are different approaches to make a table look better on mobile, but most are fairly bespoke. Looking for a fairly easy way for end users to add tables and have them be responsive.

Proposed solution

What I like about Bootstrap's approach is that it just adds one class so it's easy to make a table look not terrible on mobile. Their approach is to add a wrapping div around the table with the table-responsive class.

The nice thing is that this approach can be used in addition to the more bespoke approaches (such as turning the table elements into display: block and hiding the thead row on small screens).

It would be easy to at least add this to Basis:

.table-responsive {
  overflow-x: auto;
  position: relative;
}

And perhaps a bit of JS to add the wrapping div around tables like this:

(function ($) {

  "use strict";

  /**
   * Wrap tables in div to make them responsive.
   */
  Backdrop.behaviors.tableResponsive = {
    attach: function (context, settings) {
      $('table', context).once('table-responsive', function () {
        var $table = $(this);
        $table.wrap('<div class="table-responsive"></div>')
      });
    }
  };

})(jQuery);

The JS could be more selective if needed, though I'm not sure if it is. This would add the div around tables inserted in a textarea as well as tables created with Views.

Alternatives that have been considered

The CKEditor table button could have a "Make table responsive" checkbox which would add the div at the same time. Then the class would need to be in a core module, not Basis. There could also be a separate checkbox in a View when using the table style.

Other

I'm currently using the first approach in a custom theme so a client's site can be more responsive now, but it would be good to have an option in core.