JQuery で td のただしい幅がとれずに往生したのでメモ。

2013/09/12 16:33:47

table の特定の行や列を複製したかったのだが、どうもずれる。

で、色々やってたら JQuery ではなくて Javascript の問題だった。Firefox と IE で起こって、Chrome では起こらない。

<table id="TABLE">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
	</tr>
</table>

td を 100% / 5 の width:20% にして等幅に設定したあと、table に width:500px とすると、element.clientWidth でそれぞれ 100 が取れる。これは正常。

td は width:20% のまま、table に width:502px など 5 で割り切れない数字を設定するとブラウザによって返す値が変わる。

var tds = document.getElementById('TABLE').getElementsByTagName('td');
var result = [];
for (var i = 0, l = tds.length; i < l; i++) {
	result.push(tds[i].clientWidth);
}
console.log(result);

Chrome では [100, 100, 100, 101, 101] といったように、等幅ではないが合計で 502px となる実際に表示されている横幅を返す。

Firefox と IE では [100, 100, 100, 100, 100] と、等幅ではあるが表示とはことなる数値 (スクリーンショットで測定すると、きちんと 100 と 101 が混在している) を返す。

table を 503px にした場合は [101, 101, 101, 101, 101] と返ってくる。それぞれ、502 / 5 と 503 / 5 した数値の四捨五入だ。

td 内に div を置いてその横幅を測定しても同値が返ってくるので、これはもうどうしようもない。

border-collapse:collapse すると Chrome もいいかげんな数値を返すけど、div を挿入して幅をとると正確な数値を返す。