tdとthタグにwidthやheightを指定しても反映されない??
そもそもwidthとheightを指定きないもの？
ちょっと25×40のテーブルで動的に列(横)要素を付け足していくものを作らないといけなくて、キチンとhtmlを触ってなかったからそのツケが来たのだろうかと思うこの頃。
最初に疑うべきはそもそもこのようなプロパティ・スタイルを受け付けないのか調べると、、、 "html td width"とかで検索すれば出てくるリファレンスでも普通に指定している... まぁ指定できないなんて聞いた事ないし何かのプロパティと相殺し合っているんだろうかね。
でも、html4からすでに非推奨らしいからプロパティでは指定しない方が良いのかもしれない。 スタイルでは指定して良いっぽい。調べてないからはっきりとは言えないが。
遭遇してる状態
thには行数を示す文字が入っているから平気なのか普通に表示されるが、問題は何も入っていない空のtdタグ達。 こいつらは1x1の超ちっちゃい要素として表示される。。。 [html] <table id="right_table"> <tbody> <tr> <th>1</th> <td id="r_id1" class="r0"></td> <td id="r_id2" class="r25"></td> <td id="r_id3" class="r50"></td> <td id="r_id4" class="r75"></td> <td id="r_id5" class="r100"></td> <td id="r_id6" class="r125"></td> <td id="r_id7" class="r150"></td> <td id="r_id8" class="r175"></td> <td id="r_id9" class="r200"></td> <td id="r_id10" class="r225"></td> <td id="r_id11" class="r250"></td> <td id="r_id12" class="r275"></td> <td id="r_id13" class="r300"></td> <td id="r_id14" class="r325"></td> <td id="r_id15" class="r350"></td> <td id="r_id16" class="r375"></td> <td id="r_id17" class="r400"></td> <td id="r_id18" class="r425"></td> <td id="r_id19" class="r450"></td> <td id="r_id20" class="r475"></td> <td id="r_id21" class="r500"></td> <td id="r_id22" class="r525"></td> <td id="r_id23" class="r550"></td> <td id="r_id24" class="r575"></td> <td id="r_id25" class="r600"></td> <td id="r_id26" class="r625"></td> <td id="r_id27" class="r650"></td> <td id="r_id28" class="r675"></td> <td id="r_id29" class="r700"></td> <td id="r_id30" class="r725"></td> <td id="r_id31" class="r750"></td> <td id="r_id32" class="r775"></td> <td id="r_id33" class="r800"></td> <td id="r_id34" class="r825"></td> <td id="r_id35" class="r850"></td> <td id="r_id36" class="r875"></td> <td id="r_id37" class="r900"></td> <td id="r_id38" class="r925"></td> <td id="r_id39" class="r950"></td> <td id="r_id40" class="r975"></td> </tr> <tr> <th>2</th> <td id="r_id1" class="r1"></td> <td id="r_id2" class="r26"></td> <td id="r_id3" class="r51"></td> <td id="r_id4" class="r76"></td> <td id="r_id5" class="r101"></td> <td id="r_id6" class="r126"></td> <td id="r_id7" class="r151"></td> <td id="r_id8" class="r176"></td> <td id="r_id9" class="r201"></td> <td id="r_id10" class="r226"></td> <td id="r_id11" class="r251"></td> <td id="r_id12" class="r276"></td> <td id="r_id13" class="r301"></td> <td id="r_id14" class="r326"></td> <td id="r_id15" class="r351"></td> <td id="r_id16" class="r376"></td> <td id="r_id17" class="r401"></td> <td id="r_id18" class="r426"></td> <td id="r_id19" class="r451"></td> <td id="r_id20" class="r476"></td> <td id="r_id21" class="r501"></td> <td id="r_id22" class="r526"></td> <td id="r_id23" class="r551"></td> <td id="r_id24" class="r576"></td> <td id="r_id25" class="r601"></td> <td id="r_id26" class="r626"></td> <td id="r_id27" class="r651"></td> <td id="r_id28" class="r676"></td> <td id="r_id29" class="r701"></td> <td id="r_id30" class="r726"></td> <td id="r_id31" class="r751"></td> <td id="r_id32" class="r776"></td> <td id="r_id33" class="r801"></td> <td id="r_id34" class="r826"></td> <td id="r_id35" class="r851"></td> <td id="r_id36" class="r876"></td> <td id="r_id37" class="r901"></td> <td id="r_id38" class="r926"></td> <td id="r_id39" class="r951"></td> <td id="r_id40" class="r976"></td> </tr> ・・・・・中略・・・・・ <tr> <th>25</th> <td id="r_id1" class="r24"></td> <td id="r_id2" class="r49"></td> <td id="r_id3" class="r74"></td> <td id="r_id4" class="r99"></td> <td id="r_id5" class="r124"></td> <td id="r_id6" class="r149"></td> <td id="r_id7" class="r174"></td> <td id="r_id8" class="r199"></td> <td id="r_id9" class="r224"></td> <td id="r_id10" class="r249"></td> <td id="r_id11" class="r274"></td> <td id="r_id12" class="r299"></td> <td id="r_id13" class="r324"></td> <td id="r_id14" class="r349"></td> <td id="r_id15" class="r374"></td> <td id="r_id16" class="r399"></td> <td id="r_id17" class="r424"></td> <td id="r_id18" class="r449"></td> <td id="r_id19" class="r474"></td> <td id="r_id20" class="r499"></td> <td id="r_id21" class="r524"></td> <td id="r_id22" class="r549"></td> <td id="r_id23" class="r574"></td> <td id="r_id24" class="r599"></td> <td id="r_id25" class="r624"></td> <td id="r_id26" class="r649"></td> <td id="r_id27" class="r674"></td> <td id="r_id28" class="r699"></td> <td id="r_id29" class="r724"></td> <td id="r_id30" class="r749"></td> <td id="r_id31" class="r774"></td> <td id="r_id32" class="r799"></td> <td id="r_id33" class="r824"></td> <td id="r_id34" class="r849"></td> <td id="r_id35" class="r874"></td> <td id="r_id36" class="r899"></td> <td id="r_id37" class="r924"></td> <td id="r_id38" class="r949"></td> <td id="r_id39" class="r974"></td> <td id="r_id40" class="r999"></td> </tr> </tbody> </table> [/html]
こんな感じ。構造的には単純だけど、これで表示すると全てのtdタグがつぶれた状態で表示される。 ここに直接widthとか指定しても変わらないし、cssでも相変わらず。 変化があったのは、tdタグの中に改行を入れてやると上手く表示されたけど根本解決ではないので別の方法を模索する。
結局選んだ方法は...
幅を指定するcssやプロパティではなく、cssでpaddingを指定する方法にした。 今のところ自分が知りうる方法ではこのやり方が一番スマートな気がする。
[css]
right_table > tbody > tr > td {
background-color: white; padding:10px; } [/css] さっきのhtmlにこのcssを適応させればtdが極端につぶれる事なくpaddingで指定した分だけ幅をもって生成された。 でもこれ以外にも方法はあると思うのでご存知の方が入れば是非ご教授願います。
