WordPressのプラグイン “TinyMCE Advance” では、表組み（table要素）の罫線をちょっと動かすだけでも、”width”や”height”が付加されてしまいます。
これではレスポンシブになりません。
th要素やtd要素に”width”が付いていても、CSSでtableに対して”max-width: 100%;”を適用しておけばレスポンシブ対応にできます。
でもTinyMCE Advanceでは”table style=”width: 750px”と、table要素に対してstyle属性で指定されてしまうため、親要素の幅が狭いとtableのみはみ出してしまいます。
解決策としてCSSで”max-width: 100%;”を指定すると、Safari, Firefox, Edgeでは有効なものの、Chromeのみ適用されません。（優先順位がstyle属性の方が高いため）
” !important”を指定しても無駄です。
そこで色々と試したところ、tableに対して
display: table-row;
を指定すると、max-widthが適用された状態にできました。
この指定はChromeに対してだけ適用させたい場合、以下のHackが有効です。
/* Only Chrome
tableにmax-wdthを指定しているにも関わらず適用されないため */
@media screen and (-webkit-min-device-pixel-ratio:0){
.entry-content table{
display: table-row;
}
}
ちなみにth要素やtd要素に”width”や”height”が付かないようにする方法は、「まっしろブログ」さんのサイトで紹介されていました。
TinyMCEがTableタグに「width」と「height」を勝手に設定する機能を無効にする
他、参考にしたサイト：