ブログ記事を自分の覚書・備忘録代わりに使っているわけですが。 たまたま過去の記事を参照してみたら、テーブルのレイアウトが大幅に崩れているのを発見 テーブル(表)が記事のカラムから大幅にはみ出してしまっていて、左端の部分しか見えていない状態。 テーブル下部にスクロールバーが出ていて、テーブルをスクロールできるようになっているが、かなり大なテーブルなのでスクロールバーはかなり下のほうまでスクロールしないと見えない・・・。（スマホやタブレットなら表を指でスライドできますが、パソコンでの操作は辛いですね・・・） なんでそうなったのか・・・ テーブルにスクロールバーが出る場合と出ない場合の動作の調査から始めたので 原因を究明するのに数時間を要してしまいましたよ・・・orz
とりあえずは、セル内の改行方式を折り返す設定にしてみたら、解決はできた。 （※White-spaceをnormal／pre-wrap／pre-lineのどれかに指定すればOK） 改行の仕方は先日まとめておいたのが役にたった(^^;) ⇒【覚書】単語の途中で折り返すには 改行の制御(white-space)と単語の折り返し制御(word-break／word-wrap)まとめ
ただ、そういう対症療法的な問題ではなく、なんで急に設定が変わったのか？ （そもそも自動で折返さない設定のテーブルを作っても、表が欄外にはみ出すだけで、デフォールトではスクロールバーは出なかった気がする・・・） スタイルシートにいらん事書き加えてしまったかと確認したけれど、特に問題を発見できない・・・ それどころか、テーブルのセルのスタイルに自動で折り返す設定を書き加えても反映されない・・・？！ 原因が分からず、ちょっとコーヒーブレイク…
そこで、フッと思い出した・・・ あれ、そう言えばカスタマイザーにテーブルをスクロールさせる設定があったような・・・？ 当たりでしたorz 「Simplicity」のカスタマイザーの記事の設定のところに、「大きな表は横スクロール」という設定がありました。。。orz 先日、カスタマイザーを確認していた時に、チェックを入れてしまった模様 設定を気軽に変えてはいけませんね。（設定を変えたらちゃんと結果を確認しろということですね、反省）
ただ、おかげでいくつかまた新しいことを学習できましたが(笑) TABELのスクロールバーはセルの改行の仕方に依存するとか、White-spaceの動作の違いが再確認できて、いままで割りと適当だった部分を緻密にコントロールできるようになりました。 それと、Simplicityを導入しようとしている人に助言 カスタマイザーの「レイアウト(投稿・固定ページ)」の中にある『大きなテーブルはスクロール』はオンにしないほうが無難 （※TABLEをスクロール可能にしたい場合は、そのテーブルをDIVで囲って「overflow:auto;」とすればOKです。） Simplicityのカスタマイザーでテーブルをスクロール可能にしてしまうと、既存のテーブルのレイアウトが崩壊する可能性があります（テーブルがカラムからはみ出してしまう） ゼロからブログを書く人は良いですが、Simplicityを使うような人は、移転・乗り換えの人が圧倒的に多いと思いますので、テーブルを使用した記事が既にあるなら、意図していない表の崩壊が起きる可能性がありますので。 はみ出すだけでなく、意図していない所でスクロールバーが表示されてしまってるのも確認しました。（スクロールバーが出ているのに、スクロールする必要はない状態。） →何故そうなるのか原因をはっきり究明できていないのですが・・・line-heightの記述を削除したら出なくなった部分がありました。ただ、それでは消えないテーブルもあり。。。 テーブルのスクロールをオンにするとFIELDSETの中にTABELを使った場合も正常に折り返されない事も確認しました。 それともうひとつ、テーブルの下に隙間ができてしまうのも問題。 例えばテーブルを上下に２個並べた時に、マージンを0にしていれば、上下の表はぴったりくっつくはずですが、カスタマイザーでスクロールをオンにした状態だと間に１行隙間ができるのです。（今のところ、カスタマイザーのスクロールオンの状態でこの隙間をゼロにする方法は見つけられていません。） というか、オンにした時に、内部でどのような変更がなされているのか、Simplicityの仕様を確認していないので・・・(^^;) そもそもはみ出してしまうような大きな（自動で折返さない設定の）テーブルを作っても、デフォールトではスクロールバーは出なかった気がするので、内部で何か特殊な処理をしているのかも？ ちゃんと調べれば設定を解除する方法はあるのかも知れませんが、そこまで追求しませんでした、そもそもオンにしなければ良いだけの話なので、とりあえず、今日のところはここまでにしておいてやらぁ、覚えてろよ～・・・と逃げ去る。。。
コメント