WordpressのTinyMCE Advanceが自動的に付ける"width"や"height"を削除したいが・・・

Posted on

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」を勝手に設定する機能を無効にする

他、参考にしたサイト:

お手数ですが、下記入力項目に「コメント投稿」と入力して下さい。

Trackback

ページトップに戻る