WEB制作トラブル速戦即決術！第8回

[TROUBLE 41]

行数が増えるとtable要素の
ボーダーが消えてしまう

文＝タム☆タム（ (有)ムーニーワークス）

A.	ボーダーで4辺を囲むときは一括指定する

ボーダーで四辺囲われたタグが2,000行など膨大になると、ボーダーの一部が消えてしまうときがある。その場合border-leftなどで個別に指定せずに、borderで一括に指定し、ボーダーの重なりは「border-collapse;」で打ち消すことで解決する。

テーブルなどで格子状にボーダーを張りめぐらせたいとき、Aのように"「"＋"」"状のボーダーの組み合わせで表現するとバグが出てしまう。Bではすべてのセルを"□"状に囲ってしまい、collapseで重なりを回避する

for-in構文を利用すると配列のキーの種類に関係なく要素の数だけ処理を行える。これを利用して要素を数える関数を作成した。1行目から7行目の記述が関数の宣言で9行目以降は使用例だ
行が膨大なってしまうとFirefoxでは図の左ようにボーダーが表示されないというバグがおきてしまう。Bのように記述することで右のようにボーダーを正しく表示できる