IE で table のセルを等幅にする
2012・12・1
今まで気が付かなかったのだが、IEで見ると植物図鑑の種のページでレイアウトが崩れている。firefox でも chrome でも問題は無かったのに。IE だけは <table>内のセル<td>巾指定が効いてないのだ。そこでまたいろいろ試行錯誤で、問題はIEだけではない事が判明した。firefoxでは目立たなかっただけだった。尚、firefox と Chrome とが同じ、ＩＥと Opera とが同じ表示になった。
まずはセル巾を指定しない場合。実はここで各セルごとに「width="20%"」とすれば済んだのだが面倒がったのが間違いの元でした。以下一行のセル数は５で、また巾の比がよく解るように等幅のイメージを置いた。
<html> <body> <table width="250" border="1"> <tr> <td>ab</td> <td>abc</td> <td>abcd</td> <td colspan="2" width="40%">abcd</td> </tr> </table> </body> </html>
css でセル巾を指定したとき。firefox では最後の結合したセル巾が大きいので思惑通りになったと勘違いした。css での巾指定すると タグ要素（width=）は無効となるようだ。
<html> <style type="text/css"> セル巾を指定 td{width:50px;} </style> <body> <table width="250" border="1"> <tr> <td>ab</td> <td>abc</td> <td>abcd</td> <td colspan="2" width="40%">abcd</td> </tr> (width="40%" は無効) </table> </body> </html>
css でセル巾を指定して更に空のセルを５つ並べた行を追加したことで等巾になった。
<html> <style type="text/css"> セル巾を指定。これが無ければ崩れます。 td{width:50px;} </style> <body> <table width="250" border="1"> <tr> <td>a</td> <td>abc</td> <td>abcd</td> <td colspan="2">abcd</td> </tr> 次の一行を追加 <tr><td></td><td></td><td></td><td></td><td></td></tr> </table> </body> </html>
table-layout: をcssに追加すれば好いということも書いてあったが、効果なかった。全部を書き換えることはできないので気付いた都度に修正して行きます。
今回の教訓は手間を惜しんではいけないということでした。