Disable table stacking only in TinyMCE


#1

Hi,

I am trying to disable the responsiveness of the table, when it is used inside a TinyMCE, to let the editor always see the default desktop view, in case the editor window is small enough and would unintentionally trigger the media query. Is there a way to disable the corresponding media query, when inside the TinyMCE:

/* Responsive */
@media only screen and (max-width : @largestMobileScreen) {
  .ui.table:not(.unstackable) {
    width: 100%;
  }
  .ui.table:not(.unstackable) tbody,
  .ui.table:not(.unstackable) tr,
  .ui.table:not(.unstackable) tr > th,
  .ui.table:not(.unstackable) tr > td  {
    display: block !important;
    width: auto !important;
    display: block !important;
  } 
  ...
}

Or any other way to get this working?
I was thinking about adding the “unstackable” class to the table in the TinyMCE via JavaScript/jQuery, but when the content gets saved, the table gets saved as unstackable, which is not what I want. Another thing I tried was using the tables.overrides, but since I am not able to know which theme the user uses I can not just hard code the style back to basic.

TinyMCE renders an iFrame with <body id="tinymce">...</body> offering the opportunity to directly modify sUI’s table.less file, but with that I would lose the capability to upgrade sUI.

Thanks in advance!