テーブル要素をドット罫線でコーディングする方法

デザイン上、少し小技が必要なコーディングだったのでメモ。

CSSでのドット線は、ブラウザによって描画が違うので、画像で表示させる方法にしました。

難点は、”テーブル左右の線を表示させない”こと。

　CSS2

　ドットの間隔3px

　2列以上のテーブルの場合、単純な3pixel画像では不可能かもしれない

　↓2列で作ってみた

　＜tbody＞に縦リピートで描画してみると、Chromeでは2つの線が...（バグ？）

参考サイトを見つけました。

テーブル要素の背景画像に設定します。（全体がドットの背景になります）

テーブルに対するマージンをマイナス指定して、左右の線を隠しています。

>||

</tr></tbody>

</table>

</div>

<style>

#primary { width:100%; padding:0 10px; }

.entry-content { }

table.baseTbl { width:699px; margin:0 -2px; boder-spacing:3px; background:url(画像URL) repeat-y 0 0; }

table.baseTbl td, table.baseTbl th { background:#fff; }

</style>

||<

その他デザインに合わせて。。。

おわり。

Tool & Snippet