TinyMCE Advanced プラグインを利用すると、WordPress のビジュアルエディタでテーブルを挿入することができるのですが、このテーブルの挙動には以前から悩まされています。それは、テーブルと全てのセルに勝手に width や height を設定してしまうという仕様です。

以前の TinyMCE Advanced 5.1.0 までは、テーブルを挿入した時は問題ないのですが、テーブルの罫線をドラッグした際に width や height が追加されます。これは後述の方法で対策していました。

そして TinyMCE Advanced が 5.2.0 にアップッデートされた時、改善されるかと思いきや、ますます厄介なことに、テーブルを挿入した時に有無を言わさず width が設定されるようになっていました。5.3.0 になってもそれは変わらないのですが、その仕様を受け入れつつ、対策することにしました。

TinyMCE Advanced ではセルの罫線をドラッグして、簡単に列幅や行高さ、テーブルの幅を変更することができます。直感的ではあるのですが、これには様々な問題が。

TinyMCE Advanced 5.1.0 までは、テーブルを挿入した時は width や height は設定されていないのですが、罫線をドラッグしたその瞬間に、テーブルと全てのセルに width や height が px 単位で設定されます。恐ろしいことにちょっと枠線に触れただけで width や height が設定されてしまいます。

このため、CSS でテーブルをレスポンシブ対応していても、インラインで、且つ px 単位で幅が設定されるので、テーブルの幅が固定されてしまいます。そのうえ、ご丁寧に全てのセルに width が設定されるのでソースが汚くなり、それを消すのも大変です。

また、カスタムスタイルでテーブルに fixed という class 属性を付け、table-layout: fixed; を設定して等幅テーブルに設定できるようにもしていますが、各セルに width が設定されると機能しません。

そこで対策として、セルの枠線のドラッグを無効にして勝手に width や height が設定されないようにする方法を採用していました。沢山の方が同じ悩みを抱えておられたようで、多くのブログ等で紹介されている方法です。
functions.php に以下を記述します。

function tinymce_custom($settings) {
  $settings['table_resize_bars'] = false;
  $settings['object_resizing'] = "img";
  return $settings;
}
add_filter('tiny_mce_before_init', 'tinymce_custom', 0);

これでセルの枠線に触れても勝手に width や height が設定されることはなく、お客様には、幅を設定したい場合は「セルのプロパティ」で % 単位で設定してもらうようにしていました。

ところが、TinyMCE Advanced が 5.2.0 にアップッデートされた際、この方法が使えなくなってしまったのです。

5.2.0 以降、TinyMCE Advanced のオプション設定で、ドラッグでのテーブル、行、列のサイズ変更を可能にするか否かを選べるようになりました。これで解決された！と思いました。

ところが、さらに困ったことにどちらに設定しても、テーブルを挿入した際にテーブルと全てのセルに均等の width が設定されるのです。上記の functions.php への記述も意味がありません。これではドラックでのサイズ変更を無効にしたところで、セルの幅が均等に固定され、そのうえ全てのセルに width が設定されるので調整が大変です。

おまけに、functions.php の記述があると、列を追加することができないという弊害がありました。（最新の 5.3.0 では大丈夫ですが、5.2.0 にアップデートした時、列を追加できなかった記憶があります。）

オプション設定でドラッグでのサイズ変更を無効にし、テーブル挿入後に［書式のクリア］ボタンを使って width の設定を削除するという方法も考えたのですが、お客様の利用を考えると、これを徹底するのは難しいかなと思います。

ただ、救いは設定される width の単位がこれまでの “px” ではなく、“%” での設定になったということです。% 単位であれば、とりあえずレスポンシブ対応は可能です。

そこで、ドラッグでサイズを調整できるという利便性を受け入れることにしました。全てのセルに width が設定されるということが気に入らないのですが。

カスタムスタイルによる等幅テーブルの設定については、

.fixed th, .fixed td {
  width: auto !important;
}

とすることで、無理やり設定するようにしました。

ところで、TinyMCE Advanced の日本語訳では次のように説明されています。

マウスのドラッグでのテーブル、行、列のサイズ変更を可能にする

テーブル全体で有効化されると、行や列はドラッグでリサイズ可能ですが、サイズはインライン CSS スタイルでセットされます。 これにより、テーマでセットされているスタイルが上書きされる場合があり、通常はスマートフォンなどの小さいスクリーン上で閲覧したときにテーブルがレスポンシブ非対応になります。 行や列がリサイズされるとすべてのテーブルの行とセル上のインラインスタイルも更新されます。

このオプションを無効にすることにより、インラインの CSS スタイルの追加ができなくなり、より整った HTML コードを生成することができます。 アドバンスドタブ内のサイズの値を入力することにより、テーブル、行、セルをリサイズすることができます。

つまり、オプションを無効にすると、インラインで width や height を設定しないということなのではないかと解釈できるのですが、実際はテーブル挿入時にインラインで width が設定されますので、整った HTML コードとはなりませんが…。

（5月31日追記）
解決策が見つかりました。
⇒ TinyMCE Advanced のテーブルで勝手に設定される width 対策（解決）