WordPress

WordPress:テーブル機能で表の幅を整える

投稿日:2019年6月23日

『TinyMCE Advanced』プラグインの恩恵で使えるテーブル機能は、かなり便利です。
しかし、幅の調節でいつも悩まされるので、自分用のメモとしブログ記事に残します。



デフォルト

この部分はかなり広めにしたいと思います 普通ぐらいが理想 小さくしたい

これは、デフォルトでの入力です。

コードを見てみると、パーセンテージで強制的に均等分割しようとしていますね。
長い文は広く、短い文は狭くしたいのです。

幅を調節

この部分はかなり広めにしたいと思います 普通ぐらいが理想 小さくしたい

ならば手動で、幅調節してみました。

見た目はこれで良いのですが、レスポンシブとしてはどうなんでしょう。
きっと、頑固に強制されちゃいますよね。

%を消しちゃう

この部分はかなり広めにしたいと思います 普通ぐらいが理想 小さくしたい

固定されたくないので『%』自体を消してしまいます。

これで、最も理想の形になりました。

横スクロール

この部分はかなり広めにしたいと思います 普通ぐらいが理想 小さくしたい

通常表示させ、はみ出した部分をスクロールします。
主に、スマホ対策です。

テーブルタグを『divタグ』で挟んでいます。
PCブラウザにより見え方は様々ですが、ほとんどの場合は通常表示されるでしょう。

チェック時は『Safari・Chrome・Firefox』で通常表示『Internet Explorer』のみ、はみ出しましたので、このスクロールで解決としました。

まとめ

結果的に『%』表記を消してしまうと、安定しました。

また、1行目に『auto』が入っていると、デフォルトのようになりました。
まぁ、オートの基準は様々ですからね。

テーブル機能はコードが長いので、つい『ビジュアル』で何とかしようとしてしまいがちですが、単純にコピペで増やせるので、表を量産したい時は『テキスト』で書く方が早いかも知れません。



-WordPress
-, ,

Copyright© MiyabixPhoto , 2019 All Rights Reserved.