TDの幅を均等に。
プログラムによる自動生成ページのテンプレートを作っていると、1ラインあたりのセルの数も、入り込む情報の内容量によって変わってくることがある。
あるページでは、3つのTDセルを使用するが、違うページでは、5つものTDセルを用意しなければならない、といった感じ。
こういう場合は、プログラム側と連携を取って、
- まずその情報があるならば、table部分自体を書き込む。
- そして、内容量にあったTDをはき出す
という流れにしてもらっている。
つまり、あらかじめレイアウトを決めて、そのTDの中に内容物を書き込むのではなく、TDとその内容物をセットで書き込んでもらう形。
そうすれば、テンプレートのTDの数にあわせて、セルに収まるべき情報の「数」を決めなくてもよい。
しかしそこで問題になるのが、そのTD自体の横幅。
プログラムによって、情報を当てはめると言うことは、セルに収まるべき内容物の量も変わってくる。TD自体も生成する、しない、が固定されないため、1ラインのTDの数とそれぞれのセルの内容量が違うという事態に陥る。
どういうことが起きるかというと、TDの横幅が安定しない。
プログラムにTDごとはき出してもらっているが、「こういうテキスト量のときは、このクラス名、このくらいであれば、このクラス名で……」と、指定するのも、難儀な話だろう。そこまでレイアウトにこだわるページであれば、最初からスタティックで作成していると思うし。
1ラインに収まるべきTDの数が決まっているならば、TDにwidthをつけてしまえばいいだろう。
しかし前述したとおり、どのくらいのセルの「数」が入ってくるかわからない場合、横幅を決めていたら、親DIVの横幅よりもたくさんのセル数になったときに、レイアウトが崩れる。
社内向け制作物だったら、確認画面で調整してくださいね、と言うこともできる。だが、広告入稿ページやブログのテンプレートだと、エンドユーザに対して、そんなことを要求するわけにもいかない。
前書きがやたら長くなったが、要するに、さきにtable全体の横幅を固定して、入り込んでくるTDセルには、横幅widthをしていないことで、1ラインのTDセルが何個になろうとも、勝手に均等割りを実現することができた。
例）table {table-layout : fixed ; width : 750px ; }
ヒントにしたのは、ここ。
この方はどうやら、tableタグを使っても、なるべく表示を速くしたいという目的があったようだ。
TDの内容見て表示を決めていくよりも、先にtableはこの横幅です、と宣言した方が、体感的なところで速さが違ってくるだろうなあ。
