Good working responsive Tables

/*TABLES RESPONSIVE*/
table.responsive span[data-type="responsive"]{
	display:none;
}

@media only screen and (max-width:768px){
	table.responsive span[data-type="responsive"]{
		display: block;
		/* width: 100%; */
		/*vertical-align: top;*/
		color: var(--wpex-table-thead-color);
		font-weight: var(--wpex-bold);
		color: var(--wpex-table-th-color);
		/* text-align: -webkit-match-parent; */
		/* padding: var(--wpex-table-cell-padding,.769em 1em); */
		/* border: 1px solid var(--wpex-table-cell-border-color); */
	}

	table.responsive, table.responsive thead, table.responsive tbody, table.responsive th, table.responsive td, table.responsive tr { 
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
		display: block; 
	}

	html.ie9 table.responsive, html.ie9 table.responsive thead, html.ie9 table.responsive tbody, html.ie9 table.responsive th, html.ie9 table.responsive td, html.ie9 table.responsive tr{
		float: left;
		clear: both;
		width: 100%
	}

	table.responsive tr { 
		border: 1px solid #ccc;
		margin-bottom: 20px;
	}

	table.responsive td{
		border: none;
	}

	table.responsive:not(.lefthead) th{
		display:none;
	}
	.lefthead td span {
		display:none !important;
	}

	table.responsive ul { 
		margin-bottom: 0;
	}

}

You also need to add this to your functions.php

//ADD TABLE RESPONSIVE JS AND INIT
function main_js_to_wp_footer() {
	echo '<script src="'.get_stylesheet_directory_uri().'/tables.js"></script>'; //' . site_url(); . 
}
add_action( 'wp_footer', 'main_js_to_wp_footer', 100 );

add_action( 'wp_footer', function() { ?>
  <script>	  
	//init responsive table script
	  jQuery( document ).ready( function() {
	      window.responsiveTables.init();
	  } );
  </script>
<?php }, 99 );

Create a tables.js with this content and put it in the child theme folder:

/*!
 * @author Steven Masala [me@smasala.com]
 * Github: https://github.com/smasala/responsive-tables-js
 * @license MIT https://tldrlegal.com/license/mit-license
 * Responsive Tables
 * @version 1.0.6
 *
 * usage: give any table you want to work responsively, the CSS class "responsive".
 */

 ( function( root, factory ) {
  "use strict";
  
  if ( typeof define === "function" && define.amd ) {
      define( [ "jquery" ], function( $ ) {
          return factory( root, root.document, $ );
      } );
  } else {
      return factory( root, root.document, root.jQuery );
  }

} )( this, function( window, document, $ ) {
  "use strict";
  
  if ( window.responsiveTables ) {
      console.error( "window.responsiveTables is already defined globally", window.responsiveTables );
      return;
  }

  var responsiveTables = {

      version: "1.0.6",

      titleTpl: function( data ) {
          return "<span data-type='responsive'>" + data + "</span>";
      },

      /**
       * @method init
       * @param selector {String} optional - pass if you wish to update tables that do not meet the selector: table.responsive
       * @param force {Boolean} [default=false] - optional - set true to reiterate over previous converted tables
       */
      init: function( selector, force ) {
          var me = this,
              tables = $( selector ? selector : "table.responsive" ),
              table, ths, th, trs, tds, td, text, it; //for later

          if ( tables.length > 0 ) {

              for ( var i = 0, l = tables.length; i < l; i++ ) {
                  //iterate over each table
                  table = $( tables[ i ] );
                  if ( table.attr( "data-type" ) && !force ) {
                      //ignore this table
                      continue;
                  }
                  table.attr( "data-type", "responsive" );
                  //get all the table header for the give table
                  trs = table.find( "> thead > tr, > tbody > tr, > tr" );
                  ths = trs.find( "> th" );
                  //iterate over all trs
                  for ( var ii = 0, ll = trs.length; ii < ll; ii++ ) {
                      //find tds and iterate
                      tds = $( trs[ ii ] ).find( "> td" );
                      for ( var iii = 0, lll = tds.length; iii < lll; iii++ ) {
                          //for each td - find the correct heading
                          th = ths[ iii ];
                          it = $( tds[ iii ] );
                          //get the text content
                          text = th.textContent || th.innerText || "";
                          if ( force ) {
                              it.find( "span[data-type='responsive']" ).remove();
                          }
                          //prepend td with the correct template
                          td = it.prepend( me.titleTpl( text ) );

                          td = "<span class='tdata'>" + td + "</span>";

                          
                      }
                  }
              }
          }
      }

  };
  
  //define globally
  window.responsiveTables = responsiveTables;
  return responsiveTables;
} );