[mootools]theadやtbodyのfloat:leftがIEで効かないので

Tenderfeel

17年前

それじゃあタグ変えて中身を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オブジェクト作って中身を挿入しても同じことが出来る。

シェア