それじゃあタグ変えて中身をtableの外に出せばいいんじゃん。(そしたらfloatできるじゃん)
…という発想から出来たソース。mootools使用。
※このサンプルは前バージョン(1.1.2)で書いたものなので1.2では動かないかも
IEはthead、tbody、tfootへのfloat、positionが効かない。
効果的なハックがあればいいんだけど見つからなかった。
つくづくIEはダメな子だな。
※親にID=sampleが振ってあるという前提で
<table border="0" cellspacing="0" cellpadding="0"> <thead> <tr><td colspan="2"> <p class="image"> <img src="images/sample.jpg" alt="サンプル" width="180" height="135" /><br /><small>サンプル</small></p> </td></tr> </thead> <tbody> <tr> <th scope="row">サンプル</th> <td>サンプル</td> </tr> </tbody> </table>
theadのpをtableの前に配置し、空になったtheadを消す。
▼実行後ソース
<p class="image"> <img src="images/sample.jpg" alt="サンプル" width="180" height="135" /><br /><small>サンプル</small></p> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <th scope="row">サンプル</th> <td>サンプル</td> </tr> </tbody> </table>
if($('sample')&&window.ie){ var thead =$$('thead'); var table =$$('table'); for(i=0;i<thead.length;i++){ var el = thead[i].getFirst().getFirst(); var img = el.getChildren(); img.injectBefore(table[i]); thead[i].remove(); } }
pに入れる必要ないんじゃないの?と思う場合は、
new Element(‘p’)でpオブジェクト作って中身を挿入しても同じことが出来る。