ドット線で出来ているテーブル【cssだけで作ると…】
ドット線のcssで作るのが手っ取り早いですが、Internet ExplorerとFirefoxで、見え方が違うんですよね。Firefoxではサンプル図のように点々になるけど、
table {
border-top:dotted 1px #999;
border-left:dotted 1px #999;
}
table td {
border-right:dotted 1px #999;
border-bottom:dotted 1px #999;
}
Internet Explorerではこんな感じに→、点々ではなく破線になってしまう。
このリンクをIEとFirefoxで見比べてみてください。
ドットテーブル cssで作った場合（ポップアップ） （/別窓）
破線がいいときはいいんですが、点々にしたいときは、背景画像とcellspacing="1"を使って出すのが使いやすく、確実です。
ドット線で出来ているテーブル【背景で作る編！】
大事なポイントは3つ。- 2px四方のドット画像
- cellspacing="1"
- 奇数のwidth
cellspacingを1に。
<table border="0" cellspacing="1" cellpadding="0">
<tr>
<td>サンプル</td>
<td>サンプル</td>
<td>サンプル</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
■CSS
widthは奇数にしないと、右角がおかしくなります
table {
width:351px;
padding:0;
margin:0;
background-image: url(../img/dot.gif);
}
table td {
background-color: #FFFFFF;
padding:8px;
}
■背景にするドット画像について
2px四方のドット画像を用意します。他の色をベースにしたものにも流用したいなぁと思って、きっとコーダーの皆さんのことだから、白い部分を透過したくなりますよね？ね？
しかし、そこにInternet Explorerのバグが邪魔をするんです。
2例用意してみました。
※↓dot.gifは2x2だけど、記事内では32x32に拡大して表示しています。
Internet Explorerで見ていただければ分かると思いますが、テーブル背景に敷いたドット背景が異様に重たくなるんですね。 周りのソースの量にもよるみたいなんですが、背景のドットが1秒くらいかかってぞぞーっと現れてから、tdの背景色の白がべべーっと出現、みたいな。
テーブルをドラッグしようすると何かひっかかりがあったり
windowをリサイズしようとしてもガクガクしたり、
スクロールもぎこちない動作をします。（Internet Explorer7でもそうです）
透過画像ドットテーブルに限らず、透過部分のある画像で背景にする手法は、Internet Explorerユーザーが多い今の時代、まだまだ使えないってわけなのです。
だからこのテーブルドット線案も、残念ながら、白とグレーなどのチェック画像を使うのをお奨めします。
でも、このドット線テーブル、きれいじゃないですか？個人的に好きなんで、ちょっと使いこなしたくて、研究してみました♪
Comments