『TinyMCE Advanced』プラグインの恩恵で使えるテーブル機能は、かなり便利です。
しかし、幅の調節でいつも悩まされるので、自分用のメモとしブログ記事に残します。
デフォルト
| この部分はかなり広めにしたいと思います | 普通ぐらいが理想 | 小さくしたい |
これは、デフォルトでの入力です。
|
1 2 3 4 5 6 7 8 9 |
<table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td style="width: 33.333333333333336%;">この部分はかなり広めにしたいと思います</td> <td style="width: 33.333333333333336%;">普通ぐらいが理想</td> <td style="width: 33.333333333333336%;">小さくしたい</td> </tr> </tbody> </table> |
コードを見てみると、パーセンテージで強制的に均等分割しようとしていますね。
長い文は広く、短い文は狭くしたいのです。
幅を調節
| この部分はかなり広めにしたいと思います | 普通ぐらいが理想 | 小さくしたい |
ならば手動で、幅調節してみました。
|
1 2 3 4 5 6 7 8 9 |
<table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td style="width: 50%;">この部分はかなり広めにしたいと思います</td> <td style="width: 30;">普通ぐらいが理想</td> <td style="width: 20;">小さくしたい</td> </tr> </tbody> </table> |
見た目はこれで良いのですが、レスポンシブとしてはどうなんでしょう。
きっと、頑固に強制されちゃいますよね。
％を消しちゃう
| この部分はかなり広めにしたいと思います | 普通ぐらいが理想 | 小さくしたい |
固定されたくないので『%』自体を消してしまいます。
|
1 2 3 4 5 6 7 8 9 |
<table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td style="">この部分はかなり広めにしたいと思います</td> <td style="">普通ぐらいが理想</td> <td style="">小さくしたい</td> </tr> </tbody> </table> |
これで、最も理想の形になりました。
横スクロール
| この部分はかなり広めにしたいと思います | 普通ぐらいが理想 | 小さくしたい |
通常表示させ、はみ出した部分をスクロールします。
主に、スマホ対策です。
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="scroll-box"> <table style="border-collapse: collapse; width: 100%;"> <tbody> <tr> <td>この部分はかなり広めにしたいと思います</td> <td>普通ぐらいが理想</td> <td>小さくしたい</td> </tr> </tbody> </table> </div> |
テーブルタグを『divタグ』で挟んでいます。
PCブラウザにより見え方は様々ですが、ほとんどの場合は通常表示されるでしょう。
チェック時は『Safari・Chrome・Firefox』で通常表示『Internet Explorer』のみ、はみ出しましたので、このスクロールで解決としました。
まとめ
結果的に『％』表記を消してしまうと、安定しました。
また、1行目に『auto』が入っていると、デフォルトのようになりました。
まぁ、オートの基準は様々ですからね。
テーブル機能はコードが長いので、つい『ビジュアル』で何とかしようとしてしまいがちですが、単純にコピペで増やせるので、表を量産したい時は『テキスト』で書く方が早いかも知れません。